@telia-ace/widget-types-grid 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-types-grid`
+
+The type definition for ACE One Widget (exported as `GridWidget`).

package/lib/component-platform-factory.d.ts

@@ -0,0 +1,13 @@
+import { ChangesetOptions, ChangesetProvider, ComponentNodeSettings, ComponentPlatform, ComponentQuery } from '@telia-ace/widget-core';
+import { StorageWriter } from '@telia-ace/widget-services';
+import { Container, Widget } from '@webprovisions/platform';
+export declare class LocalStorageChangesetProvider implements ChangesetProvider {
+    private container;
+    private storageWriter;
+    constructor(container: Container, storageWriter: StorageWriter);
+    static create(container: Container): Promise<LocalStorageChangesetProvider>;
+    write(key: string, target: ComponentQuery, attributes: Partial<ComponentNodeSettings>, options: ChangesetOptions): Promise<any>;
+    remove(key: string): Promise<any>;
+    load(platform: ComponentPlatform): Promise<any>;
+}
+export declare const createPlatform: (widget: Widget) => Promise<ComponentPlatform>;

package/lib/component-platform-factory.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPlatform = exports.LocalStorageChangesetProvider = void 0;
+var widget_core_1 = require("@telia-ace/widget-core");
+var widget_services_1 = require("@telia-ace/widget-services");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var platform_1 = require("@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 (0, widget_services_1.createStorageWriter)(container, STORAGE_KEY, widget_services_1.StorageCategory.Necessary, {
+            medium: widget_services_1.StorageMedium.Local,
+        }).then(function (storageWriter) { return new LocalStorageChangesetProvider(container, storageWriter); });
+    };
+    LocalStorageChangesetProvider.prototype.write = function (key, target, attributes, options) {
+        var _this = this;
+        return (0, widget_utilities_1.lock)(this)(function () {
+            return (0, widget_services_1.readStorage)(_this.container, STORAGE_KEY, widget_services_1.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 (0, widget_utilities_1.lock)(this)(function () {
+            return (0, widget_services_1.readStorage)(_this.container, STORAGE_KEY, widget_services_1.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 (0, widget_utilities_1.lock)(this)(function () {
+            return (0, widget_services_1.readStorage)(_this.container, STORAGE_KEY, widget_services_1.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 widget_core_1.ComponentQuery(platform, rules),
+                        });
+                    }
+                });
+            });
+        });
+    };
+    return LocalStorageChangesetProvider;
+}());
+exports.LocalStorageChangesetProvider = LocalStorageChangesetProvider;
+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 widget_core_1.ComponentPlatform(widget, providers);
+        var destructComponentModel = (0, widget_core_1.createComponentModel)(platform, settings);
+        widget.events.subscribe('widget:state-change', function (event, data) {
+            if (data.state === platform_1.WidgetState.Deactivating) {
+                destructComponentModel();
+            }
+        });
+        return platform;
+    });
+};
+exports.createPlatform = createPlatform;

package/lib/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/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Widget = exports.GridWidget = exports.NotFound = exports.DetachedComponent = exports.genericComponentStyling = exports.Component = void 0;
+var component_1 = require("./ui/component");
+Object.defineProperty(exports, "Component", { enumerable: true, get: function () { return __importDefault(component_1).default; } });
+Object.defineProperty(exports, "genericComponentStyling", { enumerable: true, get: function () { return component_1.styling; } });
+var detached_component_1 = require("./ui/detached-component");
+Object.defineProperty(exports, "DetachedComponent", { enumerable: true, get: function () { return __importDefault(detached_component_1).default; } });
+var not_found_1 = require("./ui/not-found");
+Object.defineProperty(exports, "NotFound", { enumerable: true, get: function () { return __importDefault(not_found_1).default; } });
+var widget_1 = require("./widget");
+Object.defineProperty(exports, "GridWidget", { enumerable: true, get: function () { return __importDefault(widget_1).default; } });
+Object.defineProperty(exports, "Widget", { enumerable: true, get: function () { return __importDefault(widget_1).default; } });

package/lib/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/services.js

@@ -0,0 +1,99 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createComponentPlatform = exports.createComponentResolver = exports.createActionResolver = exports.createServiceClient = exports.createStorageService = exports.createRoutingService = void 0;
+var component_platform_factory_1 = require("./component-platform-factory");
+var site_provider_1 = require("./site-provider");
+var createRoutingService = function (container) {
+    return Promise.resolve().then(function () { return __importStar(require('@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;
+        });
+    });
+};
+exports.createRoutingService = createRoutingService;
+var createStorageService = function (container) {
+    return Promise.resolve().then(function () { return __importStar(require('@telia-ace/widget-services')); }).then(function (_a) {
+        var StorageProvider = _a.StorageProvider;
+        return new StorageProvider();
+    });
+};
+exports.createStorageService = createStorageService;
+var createServiceClient = function (container) {
+    return Promise.resolve().then(function () { return __importStar(require('@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: (0, site_provider_1.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;
+        });
+    });
+};
+exports.createServiceClient = createServiceClient;
+var createActionResolver = function (container) {
+    return Promise.resolve().then(function () { return __importStar(require('@telia-ace/widget-core')); }).then(function (_a) {
+        var ActionResolver = _a.ActionResolver;
+        return new ActionResolver(container);
+    });
+};
+exports.createActionResolver = createActionResolver;
+var createComponentResolver = function (container) {
+    return Promise.resolve().then(function () { return __importStar(require('@telia-ace/widget-core')); }).then(function (_a) {
+        var ComponentResolver = _a.ComponentResolver;
+        return new ComponentResolver(container);
+    });
+};
+exports.createComponentResolver = createComponentResolver;
+var createComponentPlatform = function (container) {
+    return Promise.resolve().then(function () { return __importStar(require('@telia-ace/widget-core')); }).then(function (_a) {
+        var ComponentPlatform = _a.ComponentPlatform, createComponentModel = _a.createComponentModel;
+        return (0, component_platform_factory_1.createPlatform)(container.get('$widget'));
+    });
+};
+exports.createComponentPlatform = createComponentPlatform;

package/lib/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/site-provider.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSiteProvider = void 0;
+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('');
+    };
+};
+exports.createSiteProvider = createSiteProvider;

package/lib/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/ui/animated-view.js

@@ -0,0 +1,142 @@
+"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 = __importStar(require("react"));
+var react_transition_group_1 = require("react-transition-group");
+var styled_components_1 = __importDefault(require("styled-components"));
+var component_1 = __importDefault(require("./component"));
+var determine_slide_direction_1 = require("./determine-slide-direction");
+var switch_1 = __importDefault(require("./switch"));
+var StyledViewContainer = styled_components_1.default.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 = (0, styled_components_1.default)(widget_ui_1.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((0, react_1.useState)('index'), 2), routeName = _c[0], setRouteName = _c[1];
+    var _d = __read((0, react_1.useState)(determine_slide_direction_1.SlideDirection.forth), 2), transitionDirection = _d[0], setTransitionDirection = _d[1];
+    var nextRoute = (0, widget_ui_1.useRouteData)();
+    var router = (0, widget_ui_1.useRouter)();
+    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 _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((0, widget_ui_1.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((0, determine_slide_direction_1.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_1.default.createElement(StyledView, __assign({}, other, areaProperties, { scrollableCss: scrollableCss, ref: elem, columns: columns, gap: gap }, animationStyles, { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-view') }),
+            react_1.default.createElement(component_1.default, { id: childNode.id, branch: "default" })));
+    };
+    var getAnimation = function (transitionState, direction) {
+        var _a;
+        if (animation === 'slide' || animation === 'fade') {
+            return _a = {
+                    animationCss: widget_ui_1.transitionComposer.composeViewTransition(transitionState, animation, direction)
+                },
+                _a['data-state'] = transitionState,
+                _a;
+        }
+        return;
+    };
+    return (react_1.default.createElement(StyledViewContainer, { className: "humany-animated-view" },
+        react_1.default.createElement(react_transition_group_1.TransitionGroup, { component: null, childFactory: function (child) {
+                return react_1.default.cloneElement(child, { direction: transitionDirection });
+            } },
+            react_1.default.createElement(react_transition_group_1.Transition, { key: routeName, timeout: { enter: 500, exit: 500 }, onEnter: function (node) { return node === null || node === void 0 ? void 0 : node.clientHeight; }, unmountOnExit: true, direction: determine_slide_direction_1.SlideDirection.forth }, function (state, _a) {
+                var direction = _a.direction;
+                return (react_1.default.createElement(switch_1.default, { views: views, location: location, render: function (name) { return renderView(name, state, direction); } }));
+            }))));
+};
+exports.default = AnimatedView;
+var templateObject_1, templateObject_2;

package/lib/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/ui/component.js

@@ -0,0 +1,179 @@
+"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 });
+exports.styling = void 0;
+var widget_core_1 = require("@telia-ace/widget-core");
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var animated_view_1 = __importDefault(require("./animated-view"));
+var resolvable_component_1 = __importDefault(require("./resolvable-component"));
+var use_component_node_properties_1 = __importDefault(require("./use-component-node-properties"));
+var view_1 = __importDefault(require("./view"));
+var isVisible = function (size, node) {
+    if (node) {
+        return true;
+    }
+    if (typeof size === 'string') {
+        return size === 'full';
+    }
+    return size > 0;
+};
+var Component = (0, react_1.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 = (0, widget_ui_1.useComponentPlatform)();
+    var container = (0, widget_ui_1.useContainer)();
+    var _e = __read((0, react_1.useState)(), 2), descriptor = _e[0], setDescriptor = _e[1];
+    var themeContext = react_1.default.useContext(styled_components_1.ThemeContext) || {};
+    var columns = (0, widget_ui_1.useColumns)();
+    var context = (0, widget_ui_1.useContext)(id);
+    var properties = (0, use_component_node_properties_1.default)(id);
+    var _f = (0, widget_ui_1.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);
+    (0, react_1.useEffect)(function () {
+        if (components) {
+            if (id && !node) {
+                var componentNode = components.nodes.get(id);
+                if (componentNode) {
+                    setDescriptor((0, widget_core_1.asDescriptor)(componentNode, branch));
+                    if (visible) {
+                        var unmount_1 = componentNode.mount(container);
+                        return function () {
+                            unmount_1();
+                        };
+                    }
+                }
+            }
+            else if (node) {
+                setDescriptor((0, widget_core_1.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_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+        react_1.default.createElement(widget_ui_1.ComponentNodeContext.Provider, { value: descriptor },
+            react_1.default.createElement(widget_ui_1.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_1.default.createElement(StyledAnimatedView, __assign({}, props, { className: className }))) : (react_1.default.createElement(StyledView, __assign({}, props, { className: className })));
+                    }
+                    default: {
+                        var cssProps = (0, widget_ui_1.filterCssProps)(properties);
+                        return (react_1.default.createElement(resolvable_component_1.default, __assign({ ref: ref }, props, cssProps, { className: className })));
+                    }
+                }
+            })()))));
+});
+exports.styling = (0, styled_components_1.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) && widget_ui_1.paddedBorderTabStyle; });
+var StyledView = (0, styled_components_1.default)(view_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), exports.styling);
+var StyledAnimatedView = (0, styled_components_1.default)(animated_view_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), exports.styling);
+exports.default = Component;
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/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;