@telia-ace/widget-types-grid 1.0.0

package/lib/ui/detached-component.js

@@ -0,0 +1,73 @@
+"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 react_1 = __importStar(require("react"));
+var component_1 = __importDefault(require("./component"));
+var DetachedComponent = function (_a) {
+    var builder = _a.builder;
+    var container = (0, widget_ui_1.useContainer)();
+    var _b = __read((0, react_1.useState)(null), 2), node = _b[0], setNode = _b[1];
+    (0, react_1.useEffect)(function () {
+        container.getAsync('components').then(function (components) {
+            return builder(components).then(function (createdNode) {
+                setNode(createdNode);
+            });
+        });
+    }, []);
+    (0, react_1.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_1.default.createElement(component_1.default, { id: node.id, node: node, branch: "default" });
+};
+exports.default = DetachedComponent;

package/lib/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/ui/determine-slide-direction.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.determineSlideDirection = exports.findParentRoutes = exports.SlideDirection = void 0;
+var SlideDirection;
+(function (SlideDirection) {
+    SlideDirection["back"] = "back";
+    SlideDirection["forth"] = "forth";
+})(SlideDirection = exports.SlideDirection || (exports.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
+ */
+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 = (0, exports.findParentRoutes)(routeName, route.children, trail, level + 1);
+            }
+        }
+    });
+    if (!found) {
+        return null;
+    }
+    return trail;
+};
+exports.findParentRoutes = findParentRoutes;
+/**
+ * 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
+ */
+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;
+};
+exports.determineSlideDirection = determineSlideDirection;

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

package/lib/ui/html-element-handlers.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setActive = exports.setLoading = exports.setInactive = exports.createTriggerElement = exports.renderSymbol = void 0;
+// tslint:disable max-line-length
+var renderSymbol = function (symbol) {
+    if (symbol) {
+        var type = symbol.type, content = symbol.content;
+        switch (type) {
+            case 'FontAwesome':
+                return "<i class=\"humany-icon fa fa-".concat(content, "\"></i>");
+            case 'Uri':
+                return "<i class=\"humany-icon humany-custom-icon\" style=\"background: url(".concat(content, ") no-repeat center center;background-size: contain;\"></i>");
+            default:
+                return '';
+        }
+    }
+};
+exports.renderSymbol = renderSymbol;
+var triggerTabHandler = function (triggerDOMElement) {
+    var toggleTabbing = function (element, tabbing) {
+        if (!element) {
+            return;
+        }
+        if (tabbing) {
+            element.classList.add('humany-tabbing');
+        }
+        else {
+            element.classList.remove('humany-tabbing');
+        }
+    };
+    var handleKeydown = function (e) {
+        if (e.key === 'Tab') {
+            toggleTabbing(triggerDOMElement, true);
+        }
+        else if (!(e.key === 'Enter' &&
+            document.activeElement &&
+            document.activeElement.classList.contains('humany-trigger'))) {
+            toggleTabbing(triggerDOMElement, false);
+        }
+    };
+    var handleClick = function (e) {
+        if (document.activeElement &&
+            document.activeElement.classList.contains('humany-trigger') &&
+            document.activeElement.classList.contains('humany-tabbing')) {
+            return;
+        }
+        toggleTabbing(triggerDOMElement, false);
+    };
+    document.addEventListener('keydown', handleKeydown);
+    document.addEventListener('click', handleClick);
+    return function () {
+        document.removeEventListener('keydown', handleKeydown);
+        document.removeEventListener('click', handleClick);
+    };
+};
+function createTriggerElement(element, options) {
+    var symbol = options.symbol, widgetName = options.widgetName, _a = options.label, label = _a === void 0 ? '' : _a, _b = options.ariaLabel, ariaLabel = _b === void 0 ? '' : _b, _c = options.tooltip, tooltip = _c === void 0 ? '' : _c;
+    element.classList.add('humany-trigger');
+    element.classList.add("humany_".concat(widgetName));
+    if (label.length) {
+        element.classList.add('humany-has-text');
+    }
+    if (ariaLabel.length && !element.getAttribute('aria-label')) {
+        element.setAttribute('aria-label', ariaLabel);
+    }
+    if (ariaLabel.length && !element.getAttribute('tabindex')) {
+        element.setAttribute('tabindex', '0');
+    }
+    if (tooltip.length && !element.getAttribute('title')) {
+        element.setAttribute('title', tooltip);
+    }
+    var symbolHtml = (0, exports.renderSymbol)(symbol) || '';
+    element.innerHTML = "".concat(symbolHtml, "\n          <span class=\"humany-close\">\n            <svg width=\"18\" height=\"9\" viewBox=\"0 0 18 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M9 9C8.81794 9.00045 8.63759 8.96634 8.46939 8.89965C8.3012 8.83295 8.14851 8.735 8.02015 8.61145L0.194523 1.12367C0.068294 0.99862 -0.00155266 0.831133 2.61958e-05 0.657285C0.00160506 0.483436 0.0744832 0.317136 0.202964 0.194202C0.331445 0.0712675 0.505249 0.00153576 0.686941 2.50649e-05C0.868634 -0.00148563 1.04368 0.0653456 1.17437 0.186125L9 7.6739L16.8256 0.186125C16.9563 0.0653456 17.1314 -0.00148563 17.3131 2.50649e-05C17.4948 0.00153576 17.6686 0.0712675 17.797 0.194202C17.9255 0.317136 17.9984 0.483436 18 0.657285C18.0016 0.831133 17.9317 0.99862 17.8055 1.12367L9.97985 8.61145C9.85149 8.735 9.6988 8.83295 9.53061 8.89965C9.36241 8.96634 9.18206 9.00045 9 9Z\" fill=\"white\"/>\n            </svg>\n          </span>\n          <span class=\"humany-loader\">\n            <svg viewBox=\"25 25 50 50\">\n              <circle\n                cx=\"50\"\n                cy=\"50\"\n                r=\"20\"\n                fill=\"none\"\n                stroke=\"#000\"\n                stroke-width=\"2\"\n                stroke-miterlimit=\"10\" />\n            </svg>\n          </span>\n          ").concat(label.length ? "<span>".concat(label, "</span>") : '');
+    setTimeout(function () { return element && element.classList.add('humany-rendered'); });
+    return triggerTabHandler(element);
+}
+exports.createTriggerElement = createTriggerElement;
+function setInactive(elements, title) {
+    if (elements instanceof HTMLElement) {
+        if (title) {
+            elements.setAttribute('title', title);
+        }
+        elements.classList.remove('humany-active');
+        elements.classList.remove('humany-loading');
+    }
+    else if (elements instanceof Array) {
+        elements.forEach(function (e) {
+            if (title) {
+                e.setAttribute('title', title);
+            }
+            e.classList.remove('humany-active');
+            e.classList.remove('humany-loading');
+        });
+    }
+}
+exports.setInactive = setInactive;
+function setLoading(elements) {
+    if (elements instanceof HTMLElement) {
+        elements.classList.remove('humany-active');
+        elements.classList.add('humany-loading');
+    }
+    else if (elements instanceof Array) {
+        elements.forEach(function (e) {
+            e.classList.remove('humany-active');
+            e.classList.add('humany-loading');
+        });
+    }
+}
+exports.setLoading = setLoading;
+function setActive(elements, title) {
+    if (elements instanceof HTMLElement) {
+        if (title) {
+            elements.setAttribute('title', title);
+        }
+        elements.classList.add('humany-active');
+        elements.classList.remove('humany-loading');
+    }
+    else if (elements instanceof Array) {
+        elements.forEach(function (e) {
+            if (title) {
+                e.setAttribute('title', title);
+            }
+            e.classList.add('humany-active');
+            e.classList.remove('humany-loading');
+        });
+    }
+}
+exports.setActive = setActive;

package/lib/ui/index.d.ts

@@ -0,0 +1,6 @@
+export { default as AnimatedView } from './animated-view';
+export { default as Component } from './component';
+export { prepareDOMElements, TriggerType } from './prepare-dom';
+export { default as ResolvableComponent } from './resolvable-component';
+export { default as View } from './view';
+export { default as Wrapper } from './wrapper';

package/lib/ui/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = exports.View = exports.ResolvableComponent = exports.TriggerType = exports.prepareDOMElements = exports.Component = exports.AnimatedView = void 0;
+var animated_view_1 = require("./animated-view");
+Object.defineProperty(exports, "AnimatedView", { enumerable: true, get: function () { return __importDefault(animated_view_1).default; } });
+var component_1 = require("./component");
+Object.defineProperty(exports, "Component", { enumerable: true, get: function () { return __importDefault(component_1).default; } });
+var prepare_dom_1 = require("./prepare-dom");
+Object.defineProperty(exports, "prepareDOMElements", { enumerable: true, get: function () { return prepare_dom_1.prepareDOMElements; } });
+Object.defineProperty(exports, "TriggerType", { enumerable: true, get: function () { return prepare_dom_1.TriggerType; } });
+var resolvable_component_1 = require("./resolvable-component");
+Object.defineProperty(exports, "ResolvableComponent", { enumerable: true, get: function () { return __importDefault(resolvable_component_1).default; } });
+var view_1 = require("./view");
+Object.defineProperty(exports, "View", { enumerable: true, get: function () { return __importDefault(view_1).default; } });
+var wrapper_1 = require("./wrapper");
+Object.defineProperty(exports, "Wrapper", { enumerable: true, get: function () { return __importDefault(wrapper_1).default; } });

package/lib/ui/not-found.d.ts

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

package/lib/ui/not-found.js

@@ -0,0 +1,83 @@
+"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 __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 });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = require("styled-components");
+var DetachedComponent = react_1.default.lazy(function () { return Promise.resolve().then(function () { return __importStar(require('./detached-component')); }); });
+var NotFound = function (_a) {
+    var _b = _a.showSearch, showSearch = _b === void 0 ? false : _b;
+    var themeContext = (0, react_1.useContext)(styled_components_1.ThemeContext);
+    var container = (0, widget_ui_1.useContainer)();
+    return (react_1.default.createElement(react_1.default.Suspense, { fallback: null },
+        react_1.default.createElement(DetachedComponent, { builder: function (components) {
+                return container.get('settings').then(function (settings) {
+                    var _a;
+                    var _b = Object.keys(settings.components).reduce(function (acc, key) {
+                        if (settings.components[key].type === 'not-found') {
+                            acc.properties = settings.components[key].properties;
+                            acc.context = settings.components[key].context;
+                        }
+                        return acc;
+                    }, { properties: {}, context: {} }), properties = _b.properties, context = _b.context;
+                    properties.showSearch = showSearch;
+                    var node = components.createNode('area', { detached: true });
+                    node.name = 'not-found-area';
+                    node.writeLayout({
+                        size: 'full',
+                    });
+                    if (showSearch) {
+                        var searchComponentProps = Object.keys(settings.components).reduce(function (acc, key) {
+                            if (settings.components[key].type === 'search') {
+                                return settings.components[key].properties;
+                            }
+                            return acc;
+                        }, {});
+                        var searchNode = components.createNode('search', { detached: true });
+                        searchNode.writeLayout({ size: 'full' });
+                        searchNode.writeProperties(__assign({ 'css-margin-bottom': ((_a = themeContext === null || themeContext === void 0 ? void 0 : themeContext.sizes) === null || _a === void 0 ? void 0 : _a.normal) || '15px' }, searchComponentProps));
+                        node.appendChild(searchNode);
+                    }
+                    var notFoundNode = components.createNode('not-found', { detached: true });
+                    notFoundNode.writeLayout({ size: 'full' });
+                    notFoundNode.writeProperties(properties);
+                    notFoundNode.writeContext(context);
+                    node.appendChild(notFoundNode);
+                    return node;
+                });
+            } })));
+};
+exports.default = NotFound;

package/lib/ui/prepare-dom.d.ts

@@ -0,0 +1,20 @@
+import { ViewOutletOptions } from './view-outlet';
+declare enum ProvidedElements {
+    None = "none",
+    WidgetDOM = "widgetDOM",
+    TriggerDOM = "triggerDOM",
+    Both = "both"
+}
+export declare enum TriggerType {
+    Inline = "inline",
+    Link = "link",
+    Badge = "badge",
+    Unsupported = "unsupported"
+}
+export declare const determineProvidedElements: (widgetDOMElement?: HTMLElement | undefined, triggerDOMElement?: HTMLElement | undefined) => ProvidedElements;
+export declare const determineTriggerType: (triggerDefinition?: any) => TriggerType;
+declare type PrepareDOMElementsOutput = ViewOutletOptions & {
+    callback?: () => void;
+};
+export declare const prepareDOMElements: (name: string, providedWidgetElement?: HTMLElement | undefined, providedTriggerElement?: HTMLElement | undefined, triggerDefinition?: any, waitWithReplace?: boolean) => PrepareDOMElementsOutput;
+export {};

package/lib/ui/prepare-dom.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepareDOMElements = exports.determineTriggerType = exports.determineProvidedElements = exports.TriggerType = void 0;
+var ProvidedElements;
+(function (ProvidedElements) {
+    ProvidedElements["None"] = "none";
+    ProvidedElements["WidgetDOM"] = "widgetDOM";
+    ProvidedElements["TriggerDOM"] = "triggerDOM";
+    ProvidedElements["Both"] = "both";
+})(ProvidedElements || (ProvidedElements = {}));
+var TriggerType;
+(function (TriggerType) {
+    TriggerType["Inline"] = "inline";
+    TriggerType["Link"] = "link";
+    TriggerType["Badge"] = "badge";
+    TriggerType["Unsupported"] = "unsupported";
+})(TriggerType = exports.TriggerType || (exports.TriggerType = {}));
+var determineProvidedElements = function (widgetDOMElement, triggerDOMElement) {
+    if (widgetDOMElement && triggerDOMElement) {
+        return ProvidedElements.Both;
+    }
+    if (widgetDOMElement) {
+        return ProvidedElements.WidgetDOM;
+    }
+    if (triggerDOMElement) {
+        return ProvidedElements.TriggerDOM;
+    }
+    return ProvidedElements.None;
+};
+exports.determineProvidedElements = determineProvidedElements;
+var determineTriggerType = function (triggerDefinition) {
+    if (!triggerDefinition) {
+        return TriggerType.Inline;
+    }
+    if (typeof triggerDefinition === 'boolean' && triggerDefinition) {
+        return TriggerType.Link;
+    }
+    if (typeof triggerDefinition === 'object' && !Array.isArray(triggerDefinition)) {
+        return TriggerType.Badge;
+    }
+    return TriggerType.Unsupported;
+};
+exports.determineTriggerType = determineTriggerType;
+var prepareDOMElements = function (name, providedWidgetElement, providedTriggerElement, triggerDefinition, waitWithReplace) {
+    var _a, _b;
+    if (waitWithReplace === void 0) { waitWithReplace = false; }
+    var providedElements = (0, exports.determineProvidedElements)(providedWidgetElement, providedTriggerElement);
+    var triggerType = (0, exports.determineTriggerType)(triggerDefinition);
+    var cachedOriginals = {
+        widgetDOMElement: providedWidgetElement ? providedWidgetElement.cloneNode(true) : undefined,
+        triggerDOMElement: providedTriggerElement
+            ? providedTriggerElement.cloneNode(true)
+            : undefined,
+    };
+    var output = {
+        triggerType: triggerType,
+        cachedOriginals: cachedOriginals,
+        widgetDOMElement: document.createElement('div'),
+    };
+    switch (providedElements) {
+        case ProvidedElements.Both: {
+            output.widgetDOMElement = providedWidgetElement || document.createElement('div');
+            if (triggerType !== TriggerType.Inline) {
+                output.triggerDOMElement = providedTriggerElement;
+            }
+            break;
+        }
+        case ProvidedElements.WidgetDOM: {
+            output.widgetDOMElement = providedWidgetElement || document.createElement('div');
+            if (triggerType !== TriggerType.Inline) {
+                var triggerElement = document.body.appendChild(document.createElement('a'));
+                if (triggerType === TriggerType.Link) {
+                    triggerElement.innerText = name;
+                }
+                output.triggerDOMElement = triggerElement;
+            }
+            break;
+        }
+        case ProvidedElements.TriggerDOM: {
+            var widgetElement_1 = document.createElement('div');
+            output.widgetDOMElement = widgetElement_1;
+            if (triggerType === TriggerType.Inline) {
+                // replace with widgetDOMElement in the DOM
+                widgetElement_1.id = (providedTriggerElement === null || providedTriggerElement === void 0 ? void 0 : providedTriggerElement.id) || '';
+                if (waitWithReplace) {
+                    widgetElement_1.style.display = 'none';
+                    (_a = providedTriggerElement === null || providedTriggerElement === void 0 ? void 0 : providedTriggerElement.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(widgetElement_1);
+                    output.callback = function () {
+                        var _a;
+                        (_a = providedTriggerElement === null || providedTriggerElement === void 0 ? void 0 : providedTriggerElement.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(widgetElement_1, providedTriggerElement);
+                        widgetElement_1.style.display =
+                            (providedTriggerElement === null || providedTriggerElement === void 0 ? void 0 : providedTriggerElement.style.display) || 'block';
+                    };
+                }
+                else {
+                    (_b = providedTriggerElement === null || providedTriggerElement === void 0 ? void 0 : providedTriggerElement.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(widgetElement_1, providedTriggerElement);
+                }
+                output.cachedOriginals.widgetDOMElement = providedTriggerElement;
+                output.cachedOriginals.triggerDOMElement = undefined;
+            }
+            else {
+                output.widgetDOMElement = document.body.appendChild(widgetElement_1);
+                output.triggerDOMElement = providedTriggerElement;
+            }
+            break;
+        }
+        case ProvidedElements.None: {
+            var widgetElement = document.body.appendChild(document.createElement('div'));
+            output.widgetDOMElement = widgetElement;
+            if (triggerType !== TriggerType.Inline) {
+                var triggerElement = document.body.appendChild(document.createElement('a'));
+                if (triggerType === TriggerType.Link) {
+                    triggerElement.innerText = name;
+                }
+                output.triggerDOMElement = triggerElement;
+            }
+            break;
+        }
+    }
+    return output;
+};
+exports.prepareDOMElements = prepareDOMElements;

package/lib/ui/render.d.ts

@@ -0,0 +1,3 @@
+import { Container } from '@webprovisions/platform';
+declare const _default: (container: Container, element: HTMLElement) => void;
+export default _default;

package/lib/ui/render.js

@@ -0,0 +1,11 @@
+"use strict";
+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_dom_1 = require("react-dom");
+var wrapper_1 = __importDefault(require("./wrapper"));
+exports.default = (function (container, element) {
+    return (0, react_dom_1.render)(react_1.default.createElement(wrapper_1.default, { container: container }), element);
+});

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

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