@telia-ace/widget-types-grid 1.0.0

package/lib-esm/component-platform-factory.js

@@ -0,0 +1,101 @@
+import { ComponentPlatform, ComponentQuery, createComponentModel, } from '@telia-ace/widget-core';
+import { createStorageWriter, readStorage, StorageCategory, StorageMedium, } from '@telia-ace/widget-services';
+import { lock } from '@telia-ace/widget-utilities';
+import { WidgetState } from '@webprovisions/platform';
+var STORAGE_KEY = 'changesets';
+var convertSettingsToAttributes = function (settings) {
+    var attributes = { tags: settings.tags };
+    if (settings.context && typeof settings.context !== 'function') {
+        attributes.context = settings.context;
+    }
+    if (settings.properties && typeof settings.properties !== 'function') {
+        attributes.properties = settings.properties;
+    }
+    if (settings.layout && typeof settings.layout !== 'function') {
+        attributes.layout = settings.layout;
+    }
+    return attributes;
+};
+var LocalStorageChangesetProvider = /** @class */ (function () {
+    function LocalStorageChangesetProvider(container, storageWriter) {
+        this.container = container;
+        this.storageWriter = storageWriter;
+    }
+    LocalStorageChangesetProvider.create = function (container) {
+        return createStorageWriter(container, STORAGE_KEY, StorageCategory.Necessary, {
+            medium: StorageMedium.Local,
+        }).then(function (storageWriter) { return new LocalStorageChangesetProvider(container, storageWriter); });
+    };
+    LocalStorageChangesetProvider.prototype.write = function (key, target, attributes, options) {
+        var _this = this;
+        return lock(this)(function () {
+            return readStorage(_this.container, STORAGE_KEY, StorageMedium.Local).then(function (bag) {
+                if (bag === void 0) { bag = {}; }
+                var _a = bag.keys, keys = _a === void 0 ? [] : _a, _b = bag.items, items = _b === void 0 ? {} : _b;
+                var existingIndex = keys.indexOf(key);
+                if (existingIndex > -1) {
+                    keys.splice(existingIndex, 1);
+                }
+                keys.push(key);
+                items[key] = {
+                    options: options,
+                    attributes: convertSettingsToAttributes(attributes),
+                    rules: target.rules,
+                };
+                return _this.storageWriter({ keys: keys, items: items });
+            });
+        });
+    };
+    LocalStorageChangesetProvider.prototype.remove = function (key) {
+        var _this = this;
+        return lock(this)(function () {
+            return readStorage(_this.container, STORAGE_KEY, StorageMedium.Local).then(function (bag) {
+                if (bag === void 0) { bag = {}; }
+                var _a = bag.keys, keys = _a === void 0 ? [] : _a, _b = bag.items, items = _b === void 0 ? {} : _b;
+                var indexToRemove = keys.indexOf(key);
+                if (indexToRemove > -1) {
+                    keys.splice(indexToRemove, 1);
+                    delete items[key];
+                    return _this.storageWriter(bag);
+                }
+            });
+        });
+    };
+    LocalStorageChangesetProvider.prototype.load = function (platform) {
+        var _this = this;
+        return lock(this)(function () {
+            return readStorage(_this.container, STORAGE_KEY, StorageMedium.Local).then(function (bag) {
+                if (bag === void 0) { bag = {}; }
+                var _a = bag.keys, keys = _a === void 0 ? [] : _a, _b = bag.items, items = _b === void 0 ? {} : _b;
+                keys.forEach(function (key) {
+                    var item = items[key];
+                    if (item) {
+                        var rules = item.rules, attributes = item.attributes, options = item.options;
+                        platform.write({
+                            attributes: attributes,
+                            options: options,
+                            target: new ComponentQuery(platform, rules),
+                        });
+                    }
+                });
+            });
+        });
+    };
+    return LocalStorageChangesetProvider;
+}());
+export { LocalStorageChangesetProvider };
+export var createPlatform = function (widget) {
+    var container = widget.container;
+    return LocalStorageChangesetProvider.create(container).then(function (localStorage) {
+        var settings = container.get('$settings');
+        var providers = { localStorage: localStorage };
+        var platform = new ComponentPlatform(widget, providers);
+        var destructComponentModel = createComponentModel(platform, settings);
+        widget.events.subscribe('widget:state-change', function (event, data) {
+            if (data.state === WidgetState.Deactivating) {
+                destructComponentModel();
+            }
+        });
+        return platform;
+    });
+};

package/lib-esm/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Component, styling as genericComponentStyling } from './ui/component';
+export { default as DetachedComponent } from './ui/detached-component';
+export { default as NotFound } from './ui/not-found';
+export { default as GridWidget, default as Widget } from './widget';

package/lib-esm/index.js

@@ -0,0 +1,4 @@
+export { default as Component, styling as genericComponentStyling } from './ui/component';
+export { default as DetachedComponent } from './ui/detached-component';
+export { default as NotFound } from './ui/not-found';
+export { default as GridWidget, default as Widget } from './widget';

package/lib-esm/services.d.ts

@@ -0,0 +1,7 @@
+import { Container } from '@webprovisions/platform';
+export declare const createRoutingService: (container: Container) => Promise<any>;
+export declare const createStorageService: (container: Container) => Promise<import("@telia-ace/widget-services").StorageProvider>;
+export declare const createServiceClient: (container: Container) => Promise<any>;
+export declare const createActionResolver: (container: Container) => Promise<import("@telia-ace/widget-core").ActionResolver>;
+export declare const createComponentResolver: (container: Container) => Promise<import("@telia-ace/widget-core").ComponentResolver>;
+export declare const createComponentPlatform: (container: Container) => Promise<import("@telia-ace/widget-core").ComponentPlatform>;

package/lib-esm/services.js

@@ -0,0 +1,67 @@
+import { createPlatform } from './component-platform-factory';
+import { createSiteProvider } from './site-provider';
+export var createRoutingService = function (container) {
+    return import('@telia-ace/widget-routing').then(function (_a) {
+        var RoutingService = _a.RoutingService, HistoryMode = _a.HistoryMode;
+        return container.get('settings').then(function (settings) {
+            var _a = settings.routing, _b = _a.initialPath, initialPath = _b === void 0 ? '/' : _b, _c = _a.mode, mode = _c === void 0 ? HistoryMode.scopedHash : _c, basePath = _a.basePath, views = settings.views;
+            var routingService = new RoutingService(container, {
+                initialPath: initialPath,
+                mode: mode,
+                routes: Object.keys(views).map(function (name) { return ({
+                    name: name,
+                    path: views[name].path,
+                }); }),
+                basePath: basePath,
+            });
+            return routingService;
+        });
+    });
+};
+export var createStorageService = function (container) {
+    return import('@telia-ace/widget-services').then(function (_a) {
+        var StorageProvider = _a.StorageProvider;
+        return new StorageProvider();
+    });
+};
+export var createServiceClient = function (container) {
+    return import('@telia-ace/knowledge-serviceclient').then(function (_a) {
+        var ServiceClient = _a.ServiceClient, ServiceProxy = _a.ServiceProxy;
+        return container.get('settings').then(function (settings) {
+            var _a = container.get('$widget'), name = _a.name, events = _a.events;
+            var _b = settings.data, _c = _b.projection, projection = _c === void 0 ? '' : _c, _d = _b.site, site = _d === void 0 ? 'current' : _d, _e = _b.forceHttps, forceHttps = _e === void 0 ? false : _e;
+            var proxy = new ServiceProxy(projection, { credentials: 'same-origin' });
+            // Replacing '_contact' & '_contact-method' while
+            // still using the shadow widget concept
+            var client = new ServiceClient(proxy, {
+                funnel: name.replace('_contact-method', '').replace('_contact', ''),
+                site: createSiteProvider(site, forceHttps),
+            });
+            events.subscribe('widget:settings-updated', function (event, _a) {
+                var data = _a.data;
+                if (data && data.projection !== projection) {
+                    client.proxy.setBaseUrl(data.projection);
+                }
+            });
+            return client;
+        });
+    });
+};
+export var createActionResolver = function (container) {
+    return import('@telia-ace/widget-core').then(function (_a) {
+        var ActionResolver = _a.ActionResolver;
+        return new ActionResolver(container);
+    });
+};
+export var createComponentResolver = function (container) {
+    return import('@telia-ace/widget-core').then(function (_a) {
+        var ComponentResolver = _a.ComponentResolver;
+        return new ComponentResolver(container);
+    });
+};
+export var createComponentPlatform = function (container) {
+    return import('@telia-ace/widget-core').then(function (_a) {
+        var ComponentPlatform = _a.ComponentPlatform, createComponentModel = _a.createComponentModel;
+        return createPlatform(container.get('$widget'));
+    });
+};

package/lib-esm/site-provider.d.ts

@@ -0,0 +1,5 @@
+export declare type SiteLocation = {
+    host: string;
+    pathname: string;
+};
+export declare const createSiteProvider: (site: 'current' | 'referrer', forceHttps: boolean) => (() => string);

package/lib-esm/site-provider.js

@@ -0,0 +1,14 @@
+export var createSiteProvider = function (site, forceHttps) {
+    return function () {
+        var parseLocation = function (href) {
+            var link = document.createElement('a');
+            link.href = href;
+            return link;
+        };
+        var location = window.location;
+        if (site === 'referrer' && document.referrer) {
+            location = parseLocation(document.referrer);
+        }
+        return [forceHttps ? 'https:' : '', '//', location.host, location.pathname].join('');
+    };
+};

package/lib-esm/ui/animated-view.d.ts

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

package/lib-esm/ui/animated-view.js

@@ -0,0 +1,114 @@
+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 { Grid, transitionComposer, useComponentNode, useContainer, useContext, useProperties, useRouteData, useRouter, useScroll, } from '@telia-ace/widget-ui';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React, { useState } from 'react';
+import { Transition, TransitionGroup } from 'react-transition-group';
+import styled from 'styled-components';
+import Component from './component';
+import { determineSlideDirection, SlideDirection } from './determine-slide-direction';
+import Switch from './switch';
+var StyledViewContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    flex: 1;\n"], ["\n    position: relative;\n    width: 100%;\n    flex: 1;\n"])));
+var StyledView = styled(Grid)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: absolute;\n    left: 0;\n    right: 0;\n    ", "\n    ", "\n"], ["\n    position: absolute;\n    left: 0;\n    right: 0;\n    ", "\n    ", "\n"])), function (p) { return !!p.animationCss && p.animationCss; }, function (p) { return !!p.scrollableCss && p.scrollableCss; });
+var routeHierarchy = {
+    index: 1,
+    search: 2,
+    browse: 3,
+    guide: 4,
+    contact: 5,
+    'contact-method': 6,
+    conversation: 7,
+};
+var AnimatedView = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, other = __rest(_a, ["className"]);
+    var _c = __read(useState('index'), 2), routeName = _c[0], setRouteName = _c[1];
+    var _d = __read(useState(SlideDirection.forth), 2), transitionDirection = _d[0], setTransitionDirection = _d[1];
+    var nextRoute = useRouteData();
+    var router = useRouter();
+    var properties = useProperties();
+    var context = useContext();
+    var container = useContainer();
+    var node = useComponentNode();
+    var _e = context.gap, gap = _e === void 0 ? '0' : _e;
+    var _f = properties.columns, columns = _f === void 0 ? 1 : _f, _g = properties.animation, animation = _g === void 0 ? 'none' : _g, _h = properties.scrollable, scrollable = _h === void 0 ? false : _h, areaProperties = __rest(properties, ["columns", "animation", "scrollable"]);
+    var _j = __read(useScroll(scrollable), 2), scrollableCss = _j[0], elem = _j[1];
+    if (!node || !router) {
+        return null;
+    }
+    var location = router.location;
+    if (nextRoute.name !== routeName && nextRoute.name !== '' && animation) {
+        setTransitionDirection(determineSlideDirection(routeName, nextRoute.name, routeHierarchy));
+        setRouteName(nextRoute.name);
+    }
+    var views = container.get('$settings').views;
+    if (!Object.keys(views).length) {
+        return null;
+    }
+    var renderView = function (name, transitionState, direction) {
+        var animationStyles = getAnimation(transitionState, direction);
+        var childNode = node.getChildren(name)[0];
+        return (React.createElement(StyledView, __assign({}, other, areaProperties, { scrollableCss: scrollableCss, ref: elem, columns: columns, gap: gap }, animationStyles, { className: appendClassNames(className, 'humany-view') }),
+            React.createElement(Component, { id: childNode.id, branch: "default" })));
+    };
+    var getAnimation = function (transitionState, direction) {
+        var _a;
+        if (animation === 'slide' || animation === 'fade') {
+            return _a = {
+                    animationCss: transitionComposer.composeViewTransition(transitionState, animation, direction)
+                },
+                _a['data-state'] = transitionState,
+                _a;
+        }
+        return;
+    };
+    return (React.createElement(StyledViewContainer, { className: "humany-animated-view" },
+        React.createElement(TransitionGroup, { component: null, childFactory: function (child) {
+                return React.cloneElement(child, { direction: transitionDirection });
+            } },
+            React.createElement(Transition, { key: routeName, timeout: { enter: 500, exit: 500 }, onEnter: function (node) { return node === null || node === void 0 ? void 0 : node.clientHeight; }, unmountOnExit: true, direction: SlideDirection.forth }, function (state, _a) {
+                var direction = _a.direction;
+                return (React.createElement(Switch, { views: views, location: location, render: function (name) { return renderView(name, state, direction); } }));
+            }))));
+};
+export default AnimatedView;
+var templateObject_1, templateObject_2;

package/lib-esm/ui/component.d.ts

@@ -0,0 +1,18 @@
+import { ComponentNode } from '@telia-ace/widget-core';
+import React from 'react';
+import { DefaultTheme } from 'styled-components';
+declare type Props = {
+    className?: string;
+    isTabbing?: boolean;
+    id: string;
+    branch: string;
+    node?: ComponentNode;
+    ariaLabel?: string;
+    tabIndex?: number;
+};
+declare const Component: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+export declare const styling: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    'data-width': number;
+    'data-indent': number;
+}, DefaultTheme>>;
+export default Component;

package/lib-esm/ui/component.js

@@ -0,0 +1,150 @@
+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 { asDescriptor } from '@telia-ace/widget-core';
+import { ComponentNodeContext, ComponentPropertyContext, filterCssProps, paddedBorderTabStyle, useColumns, useComponentPlatform, useContainer, useContext, useLayout, } from '@telia-ace/widget-ui';
+import React, { forwardRef, useEffect, useState } from 'react';
+import styled, { css, ThemeContext, ThemeProvider } from 'styled-components';
+import AnimatedView from './animated-view';
+import ResolvableComponent from './resolvable-component';
+import useComponentNodeProperties from './use-component-node-properties';
+import View from './view';
+var isVisible = function (size, node) {
+    if (node) {
+        return true;
+    }
+    if (typeof size === 'string') {
+        return size === 'full';
+    }
+    return size > 0;
+};
+var Component = forwardRef(function (_a, ref) {
+    var _b;
+    var _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.isTabbing, isTabbing = _d === void 0 ? false : _d, id = _a.id, branch = _a.branch, node = _a.node, ariaLabel = _a.ariaLabel, tabIndex = _a.tabIndex, other = __rest(_a, ["className", "isTabbing", "id", "branch", "node", "ariaLabel", "tabIndex"]);
+    var components = useComponentPlatform();
+    var container = useContainer();
+    var _e = __read(useState(), 2), descriptor = _e[0], setDescriptor = _e[1];
+    var themeContext = React.useContext(ThemeContext) || {};
+    var columns = useColumns();
+    var context = useContext(id);
+    var properties = useComponentNodeProperties(id);
+    var _f = useLayout(id), _g = _f.size, size = _g === void 0 ? 'none' : _g, _h = _f.indent, indent = _h === void 0 ? 0 : _h;
+    var visible = isVisible(size, node);
+    useEffect(function () {
+        if (components) {
+            if (id && !node) {
+                var componentNode = components.nodes.get(id);
+                if (componentNode) {
+                    setDescriptor(asDescriptor(componentNode, branch));
+                    if (visible) {
+                        var unmount_1 = componentNode.mount(container);
+                        return function () {
+                            unmount_1();
+                        };
+                    }
+                }
+            }
+            else if (node) {
+                setDescriptor(asDescriptor(node, branch));
+                var unmount_2 = node.mount(container);
+                return function () {
+                    unmount_2();
+                };
+            }
+        }
+    }, [components, id, node, visible]);
+    if (!descriptor || !visible) {
+        return null;
+    }
+    var cardinal = context.cardinal, _j = context.fonts, contextFonts = _j === void 0 ? {} : _j, _k = context.accessibility, accessibility = _k === void 0 ? {} : _k, restContext = __rest(context, ["cardinal", "fonts", "accessibility"]);
+    var fonts = {
+        type: contextFonts.type,
+        base: contextFonts.base || '16px',
+        small: contextFonts.small || '0.8em',
+        normal: contextFonts.normal || '1em',
+        medium: contextFonts.medium || '1.2em',
+        large: contextFonts.large || '1.6em',
+        huge: contextFonts.huge || '2.5em',
+    };
+    var theme = __assign(__assign({}, restContext), { fonts: fonts, accessibility: __assign(__assign({}, accessibility), { isTabbing: ((_b = themeContext.accessibility) === null || _b === void 0 ? void 0 : _b.isTabbing) || isTabbing }) });
+    if (typeof cardinal === 'number') {
+        theme.sizes = {
+            cardinal: cardinal,
+            small: "".concat(cardinal, "px"),
+            normal: "".concat(cardinal * 3, "px"),
+            medium: "".concat(cardinal * 5, "px"),
+            large: "".concat(cardinal * 8, "px"),
+        };
+    }
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(ComponentNodeContext.Provider, { value: descriptor },
+            React.createElement(ComponentPropertyContext.Provider, { value: properties }, (function () {
+                var props = __assign({ 'data-width': size === 'full' ? columns : Math.min(size, columns), 'data-indent': indent, 'data-name': descriptor.name, 'data-node-id': descriptor.id, 'data-component-type': descriptor.type, 'aria-label': ariaLabel, tabIndex: tabIndex, id: descriptor.id, role: properties && properties.role }, other);
+                switch (descriptor.type) {
+                    case 'view': {
+                        return typeof properties.animation === 'string' &&
+                            properties.animation !== 'none' ? (React.createElement(StyledAnimatedView, __assign({}, props, { className: className }))) : (React.createElement(StyledView, __assign({}, props, { className: className })));
+                    }
+                    default: {
+                        var cssProps = filterCssProps(properties);
+                        return (React.createElement(ResolvableComponent, __assign({ ref: ref }, props, cssProps, { className: className })));
+                    }
+                }
+            })()))));
+});
+export var styling = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    outline: none;\n    box-sizing: border-box;\n    * {\n        ", "\n        box-sizing: border-box;\n    }\n\n    grid-column: ", ";\n\n    ", "\n\n    ", "\n\n  &:focus {\n        ", ";\n    }\n"], ["\n    outline: none;\n    box-sizing: border-box;\n    * {\n        ", "\n        box-sizing: border-box;\n    }\n\n    grid-column: ", ";\n\n    ", "\n\n    ", "\n\n  &:focus {\n        ", ";\n    }\n"])), function (p) { var _a; return !((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && 'outline: none;'; }, function (p) {
+    return p['data-indent']
+        ? "".concat(p['data-indent'] + 1, " / ").concat(p['data-indent'] + p['data-width'] + 1)
+        : "span ".concat(p['data-width']);
+}, function (p) {
+    var _a;
+    return ((_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.type) &&
+        "\n    font-family: ".concat(p.theme.fonts.type, ";\n\n    input, textarea {\n      font-family: ").concat(p.theme.fonts.type, ";\n    }\n  ");
+}, function (p) {
+    var _a;
+    return ((_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.base) &&
+        "\n    font-size: ".concat(p.theme.fonts.base, ";\n  ");
+}, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && paddedBorderTabStyle; });
+var StyledView = styled(View)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), styling);
+var StyledAnimatedView = styled(AnimatedView)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), styling);
+export default Component;
+var templateObject_1, templateObject_2, templateObject_3;

package/lib-esm/ui/detached-component.d.ts

@@ -0,0 +1,7 @@
+import { ComponentNode, ComponentPlatform } from '@telia-ace/widget-core';
+import React from 'react';
+declare type Props = {
+    builder: (components: ComponentPlatform) => Promise<ComponentNode>;
+};
+declare const DetachedComponent: React.FC<Props>;
+export default DetachedComponent;

package/lib-esm/ui/detached-component.js

@@ -0,0 +1,45 @@
+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 { useContainer } from '@telia-ace/widget-ui';
+import React, { useEffect, useState } from 'react';
+import Component from './component';
+var DetachedComponent = function (_a) {
+    var builder = _a.builder;
+    var container = useContainer();
+    var _b = __read(useState(null), 2), node = _b[0], setNode = _b[1];
+    useEffect(function () {
+        container.getAsync('components').then(function (components) {
+            return builder(components).then(function (createdNode) {
+                setNode(createdNode);
+            });
+        });
+    }, []);
+    useEffect(function () {
+        return function () {
+            if (node) {
+                container.getAsync('components').then(function (components) {
+                    components.nodes.detached = components.nodes.detached.filter(function (n) { return n.id !== node.id; });
+                });
+            }
+        };
+    }, [node]);
+    if (!node) {
+        return null;
+    }
+    return React.createElement(Component, { id: node.id, node: node, branch: "default" });
+};
+export default DetachedComponent;

package/lib-esm/ui/determine-slide-direction.d.ts

@@ -0,0 +1,26 @@
+export declare enum SlideDirection {
+    back = "back",
+    forth = "forth"
+}
+export interface RouteStructure {
+    name: string;
+    children: RouteStructure[];
+}
+/**
+ * Recursively find the parents of a nested route
+ * @param routeName Name of route to find
+ * @param routes Routes to look in
+ * @param trail Trail of parents
+ * @param level Level of the array currently looking in
+ */
+export declare const findParentRoutes: (routeName: string, routes: RouteStructure[], trail?: string[], level?: number) => string[] | null;
+/**
+ * Determine if the sliding animation should back or forth
+ * @param currentRouteName Name of current route
+ * @param nextRouteName Name of route to transition to
+ * @param routeRanking Hierarchical route ranking for the widget
+ */
+export declare const determineSlideDirection: (currentRouteName: string, nextRouteName: string, routeRanking: RouteRanking) => SlideDirection;
+export declare type RouteRanking = {
+    [key: string]: number;
+};

package/lib-esm/ui/determine-slide-direction.js

@@ -0,0 +1,46 @@
+export var SlideDirection;
+(function (SlideDirection) {
+    SlideDirection["back"] = "back";
+    SlideDirection["forth"] = "forth";
+})(SlideDirection || (SlideDirection = {}));
+/**
+ * Recursively find the parents of a nested route
+ * @param routeName Name of route to find
+ * @param routes Routes to look in
+ * @param trail Trail of parents
+ * @param level Level of the array currently looking in
+ */
+export var findParentRoutes = function (routeName, routes, trail, level) {
+    if (trail === void 0) { trail = []; }
+    if (level === void 0) { level = 0; }
+    var found = null;
+    routes.forEach(function (route, index) {
+        if (!found) {
+            if (route.name === routeName) {
+                found = route;
+            }
+            else {
+                trail[level] = route.name;
+                found = findParentRoutes(routeName, route.children, trail, level + 1);
+            }
+        }
+    });
+    if (!found) {
+        return null;
+    }
+    return trail;
+};
+/**
+ * Determine if the sliding animation should back or forth
+ * @param currentRouteName Name of current route
+ * @param nextRouteName Name of route to transition to
+ * @param routeRanking Hierarchical route ranking for the widget
+ */
+export var determineSlideDirection = function (currentRouteName, nextRouteName, routeRanking) {
+    if (typeof routeRanking[currentRouteName] === 'number' &&
+        typeof routeRanking[nextRouteName] === 'number' &&
+        routeRanking[currentRouteName] > routeRanking[nextRouteName]) {
+        return SlideDirection.back;
+    }
+    return SlideDirection.forth;
+};

package/lib-esm/ui/html-element-handlers.d.ts

@@ -0,0 +1,18 @@
+export declare const renderSymbol: (symbol?: {
+    type: string;
+    content: string;
+} | undefined) => string | undefined;
+export declare type TriggerElementOptions = {
+    symbol?: {
+        type: string;
+        content: string;
+    };
+    widgetName: string;
+    label?: string;
+    ariaLabel?: string;
+    tooltip?: string;
+};
+export declare function createTriggerElement(element: HTMLElement, options: TriggerElementOptions): () => void;
+export declare function setInactive(elements: HTMLElement | HTMLElement[], title?: string): void;
+export declare function setLoading(elements: HTMLElement | HTMLElement[]): void;
+export declare function setActive(elements: HTMLElement | HTMLElement[], title?: string): void;