@luigi-project/container 0.0.1 → 0.0.3

package/bundle.d.ts

@@ -0,0 +1,1050 @@
+import { SvelteElement, init, attribute_to_object, safe_not_equal, insert, flush, empty, detach, element, noop, attr, get_current_component, src_url_equal, binding_callbacks } from 'svelte/internal';
+import { onMount, onDestroy } from 'svelte';
+
+var ContainerService = /** @class */ (function () {
+    function ContainerService() {
+    }
+    ContainerService.prototype.isVisible = function (component) {
+        return !!(component.offsetWidth || component.offsetHeight || component.getClientRects().length);
+    };
+    ContainerService.prototype.dispatch = function (msg, targetCnt, data, callback) {
+        var ev = new CustomEvent(msg, { detail: data });
+        ev.luigiCallback = function (data) {
+            if (callback) {
+                callback(data);
+            }
+        };
+        targetCnt.dispatchEvent(ev);
+        console.log('Dispatch WC event:', msg, targetCnt, data);
+    };
+    ContainerService.prototype.getTargetContainer = function (event) {
+        var cnt;
+        globalThis.__luigi_container_manager.container.forEach(function (element) {
+            var _a;
+            if (((_a = element.iframeHandle) === null || _a === void 0 ? void 0 : _a.iframe) && element.iframeHandle.iframe.contentWindow === event.source) {
+                cnt = element;
+            }
+        });
+        return cnt;
+    };
+    ContainerService.prototype.getContainerManager = function () {
+        var _this = this;
+        if (!globalThis.__luigi_container_manager) {
+            globalThis.__luigi_container_manager = {
+                container: [],
+                messageListener: function (event) {
+                    var _a, _b, _c, _d;
+                    var targetCnt = _this.getTargetContainer(event);
+                    var target = (_b = (_a = targetCnt === null || targetCnt === void 0 ? void 0 : targetCnt.iframeHandle) === null || _a === void 0 ? void 0 : _a.iframe) === null || _b === void 0 ? void 0 : _b.contentWindow;
+                    console.log('Container event', event, targetCnt);
+                    if (target === event.source && ((_d = (_c = event.data) === null || _c === void 0 ? void 0 : _c.msg) === null || _d === void 0 ? void 0 : _d.indexOf('luigi.')) === 0) {
+                        var msg = event.data.msg;
+                        switch (msg) {
+                            case 'luigi.get-context':
+                                target.postMessage({ msg: 'luigi.init', context: targetCnt.context, internal: {} }, '*');
+                                break;
+                            case 'luigi.navigation.open':
+                                _this.dispatch('navigation-request', targetCnt, event.data.params);
+                                break;
+                            case 'luigi.ux.alert.show':
+                                _this.dispatch('alert-request', targetCnt, event.data.params);
+                                break;
+                            default:
+                                console.warn('Functionality not yet implemented: ', msg);
+                                break;
+                        }
+                    }
+                }
+            };
+            window.addEventListener('message', globalThis.__luigi_container_manager.messageListener);
+        }
+        return globalThis.__luigi_container_manager;
+    };
+    ContainerService.prototype.registerContainer = function (container) {
+        this.getContainerManager().container.push(container);
+    };
+    return ContainerService;
+}());
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(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);
+};
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+/**
+ * Default compound renderer.
+ */
+var DefaultCompoundRenderer = /** @class */ (function () {
+    function DefaultCompoundRenderer(rendererObj) {
+        if (rendererObj) {
+            this.rendererObject = rendererObj;
+            this.config = rendererObj.config || {};
+        }
+        else {
+            this.config = {};
+        }
+    }
+    DefaultCompoundRenderer.prototype.createCompoundContainer = function () {
+        return document.createElement('div');
+    };
+    DefaultCompoundRenderer.prototype.createCompoundItemContainer = function (layoutConfig) {
+        return document.createElement('div');
+    };
+    DefaultCompoundRenderer.prototype.attachCompoundItem = function (compoundCnt, compoundItemCnt) {
+        compoundCnt.appendChild(compoundItemCnt);
+    };
+    return DefaultCompoundRenderer;
+}());
+/**
+ * Compound Renderer for custom rendering as defined in luigi config.
+ */
+var CustomCompoundRenderer = /** @class */ (function (_super) {
+    __extends(CustomCompoundRenderer, _super);
+    function CustomCompoundRenderer(rendererObj) {
+        var _this = _super.call(this, rendererObj || { use: {} }) || this;
+        if (rendererObj && rendererObj.use && rendererObj.use.extends) {
+            _this.superRenderer = resolveRenderer({
+                use: rendererObj.use.extends,
+                config: rendererObj.config
+            });
+        }
+        return _this;
+    }
+    CustomCompoundRenderer.prototype.createCompoundContainer = function () {
+        if (this.rendererObject.use.createCompoundContainer) {
+            return this.rendererObject.use.createCompoundContainer(this.config, this.superRenderer);
+        }
+        else if (this.superRenderer) {
+            return this.superRenderer.createCompoundContainer();
+        }
+        return _super.prototype.createCompoundContainer.call(this);
+    };
+    CustomCompoundRenderer.prototype.createCompoundItemContainer = function (layoutConfig) {
+        if (this.rendererObject.use.createCompoundItemContainer) {
+            return this.rendererObject.use.createCompoundItemContainer(layoutConfig, this.config, this.superRenderer);
+        }
+        else if (this.superRenderer) {
+            return this.superRenderer.createCompoundItemContainer(layoutConfig);
+        }
+        return _super.prototype.createCompoundItemContainer.call(this, layoutConfig);
+    };
+    CustomCompoundRenderer.prototype.attachCompoundItem = function (compoundCnt, compoundItemCnt) {
+        if (this.rendererObject.use.attachCompoundItem) {
+            this.rendererObject.use.attachCompoundItem(compoundCnt, compoundItemCnt, this.superRenderer);
+        }
+        else if (this.superRenderer) {
+            this.superRenderer.attachCompoundItem(compoundCnt, compoundItemCnt);
+        }
+        else {
+            _super.prototype.attachCompoundItem.call(this, compoundCnt, compoundItemCnt);
+        }
+    };
+    return CustomCompoundRenderer;
+}(DefaultCompoundRenderer));
+/**
+ * Compound Renderer for a css grid compound view.
+ */
+var GridCompoundRenderer = /** @class */ (function (_super) {
+    __extends(GridCompoundRenderer, _super);
+    function GridCompoundRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    GridCompoundRenderer.prototype.createCompoundContainer = function () {
+        var containerClass = '__lui_compound_' + new Date().getTime();
+        var compoundCnt = document.createElement('div');
+        compoundCnt.classList.add(containerClass);
+        var mediaQueries = '';
+        if (this.config.layouts) {
+            this.config.layouts.forEach(function (el) {
+                if (el.minWidth || el.maxWidth) {
+                    var mq = '@media only screen ';
+                    if (el.minWidth != null) {
+                        mq += "and (min-width: ".concat(el.minWidth, "px) ");
+                    }
+                    if (el.maxWidth != null) {
+                        mq += "and (max-width: ".concat(el.maxWidth, "px) ");
+                    }
+                    mq += "{\n            .".concat(containerClass, " {\n              grid-template-columns: ").concat(el.columns || 'auto', ";\n              grid-template-rows: ").concat(el.rows || 'auto', ";\n              grid-gap: ").concat(el.gap || '0', ";\n            }\n          }\n          ");
+                    mediaQueries += mq;
+                }
+            });
+        }
+        compoundCnt.innerHTML = /*html*/ "\n        <style scoped>\n          .".concat(containerClass, " {\n            display: grid;\n            grid-template-columns: ").concat(this.config.columns || 'auto', ";\n            grid-template-rows: ").concat(this.config.rows || 'auto', ";\n            grid-gap: ").concat(this.config.gap || '0', ";\n            min-height: ").concat(this.config.minHeight || 'auto', ";\n          }\n          ").concat(mediaQueries, "\n        </style>\n    ");
+        return compoundCnt;
+    };
+    GridCompoundRenderer.prototype.createCompoundItemContainer = function (layoutConfig) {
+        var config = layoutConfig || {};
+        var compoundItemCnt = document.createElement('div');
+        compoundItemCnt.setAttribute('style', "grid-row: ".concat(config.row || 'auto', "; grid-column: ").concat(config.column || 'auto'));
+        return compoundItemCnt;
+    };
+    return GridCompoundRenderer;
+}(DefaultCompoundRenderer));
+/**
+ * Returns the compound renderer class for a given config.
+ * If no specific one is found, {DefaultCompoundRenderer} is returned.
+ *
+ * @param {*} rendererConfig the renderer config object defined in luigi config
+ */
+var resolveRenderer = function (rendererConfig) {
+    var rendererDef = rendererConfig.use;
+    if (!rendererDef) {
+        return new DefaultCompoundRenderer(rendererConfig);
+    }
+    else if (rendererDef === 'grid') {
+        return new GridCompoundRenderer(rendererConfig);
+    }
+    else if (rendererDef.createCompoundContainer ||
+        rendererDef.createCompoundItemContainer ||
+        rendererDef.attachCompoundItem) {
+        return new CustomCompoundRenderer(rendererConfig);
+    }
+    return new DefaultCompoundRenderer(rendererConfig);
+};
+/**
+ * Registers event listeners defined at the navNode.
+ *
+ * @param {*} eventbusListeners a map of event listener arrays with event id as key
+ * @param {*} navNode the web component node configuration object
+ * @param {*} nodeId the web component node id
+ * @param {*} wcElement the web component element - optional
+ */
+var registerEventListeners = function (eventbusListeners, navNode, nodeId, wcElement) {
+    if (navNode === null || navNode === void 0 ? void 0 : navNode.eventListeners) {
+        navNode.eventListeners.forEach(function (el) {
+            var evID = el.source + '.' + el.name;
+            var listenerList = eventbusListeners[evID];
+            var listenerInfo = {
+                wcElementId: nodeId,
+                wcElement: wcElement,
+                action: el.action,
+                converter: el.dataConverter
+            };
+            if (listenerList) {
+                listenerList.push(listenerInfo);
+            }
+            else {
+                eventbusListeners[evID] = [listenerInfo];
+            }
+        });
+    }
+};
+
+/** Methods for dealing with web components based micro frontend handling */
+var WebComponentService = /** @class */ (function () {
+    function WebComponentService() {
+        this.containerService = new ContainerService();
+    }
+    WebComponentService.prototype.dynamicImport = function (viewUrl) {
+        return import(viewUrl);
+    };
+    WebComponentService.prototype.processViewUrl = function (viewUrl, data) {
+        return viewUrl;
+    };
+    /** Creates a web component with tagname wc_id and adds it to wcItemContainer,
+     * if attached to wc_container
+     */
+    WebComponentService.prototype.attachWC = function (wc_id, wcItemPlaceholder, wc_container, ctx, viewUrl, nodeId) {
+        if (wc_container && wc_container.contains(wcItemPlaceholder)) {
+            var wc = document.createElement(wc_id);
+            if (nodeId) {
+                wc.setAttribute('nodeId', nodeId);
+            }
+            this.initWC(wc, wc_id, wc_container, viewUrl, ctx, nodeId);
+            wc_container.replaceChild(wc, wcItemPlaceholder);
+        }
+    };
+    WebComponentService.prototype.createClientAPI = function (eventBusElement, nodeId, wc_id) {
+        var _this = this;
+        return {
+            linkManager: function () { },
+            uxManager: function () {
+                return {
+                    showAlert: function (alertSettings) { },
+                    showConfirmationModal: function (settings) { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            return [2 /*return*/, new Promise(function (resolve, reject) {
+                                    resolve(true);
+                                })];
+                        });
+                    }); }
+                };
+            },
+            getCurrentLocale: function () { },
+            publishEvent: function (ev) {
+                // if (eventBusElement.eventBus) {
+                // eventBusElement.eventBus.onPublishEvent(ev, nodeId, wc_id);
+                // }
+            }
+        };
+    };
+    WebComponentService.prototype.initWC = function (wc, wc_id, eventBusElement, viewUrl, ctx, nodeId) {
+        var clientAPI = this.createClientAPI(eventBusElement, nodeId, wc_id);
+        if (wc.__postProcess) {
+            var url = new URL(document.baseURI).origin === new URL(viewUrl, document.baseURI).origin // TODO: check if needed
+                ? new URL('./', new URL(viewUrl, document.baseURI))
+                : new URL('./', viewUrl);
+            wc.__postProcess(ctx, clientAPI, url.origin + url.pathname);
+        }
+        else {
+            wc.context = ctx;
+            wc.LuigiClient = clientAPI;
+        }
+    };
+    /** Generates a unique web component id (tagname) based on the viewUrl
+     * returns a string that can be used as part of a tagname, only alphanumeric
+     * characters and no whitespaces.
+     */
+    WebComponentService.prototype.generateWCId = function (viewUrl) {
+        var charRep = '';
+        for (var i = 0; i < viewUrl.length; i++) {
+            charRep += viewUrl.charCodeAt(i).toString(16);
+        }
+        return 'luigi-wc-' + charRep;
+    };
+    /** Does a module import from viewUrl and defines a new web component
+     * with the default export of the module or the first export extending HTMLElement if no default is
+     * specified.
+     * @returns a promise that gets resolved after successfull import */
+    WebComponentService.prototype.registerWCFromUrl = function (viewUrl, wc_id) {
+        var _this = this;
+        var i18nViewUrl = this.processViewUrl(viewUrl);
+        return new Promise(function (resolve, reject) {
+            if (_this.checkWCUrl(i18nViewUrl)) {
+                _this.dynamicImport(i18nViewUrl)
+                    .then(function (module) {
+                    try {
+                        if (!window.customElements.get(wc_id)) {
+                            var cmpClazz = module.default;
+                            if (!HTMLElement.isPrototypeOf(cmpClazz)) {
+                                var props = Object.keys(module);
+                                for (var i = 0; i < props.length; i++) {
+                                    cmpClazz = module[props[i]];
+                                    if (HTMLElement.isPrototypeOf(cmpClazz)) {
+                                        break;
+                                    }
+                                }
+                            }
+                            window.customElements.define(wc_id, cmpClazz);
+                        }
+                        resolve(1);
+                    }
+                    catch (e) {
+                        reject(e);
+                    }
+                })
+                    .catch(function (err) { return reject(err); });
+            }
+            else {
+                console.warn("View URL '".concat(i18nViewUrl, "' not allowed to be included"));
+                reject("View URL '".concat(i18nViewUrl, "' not allowed"));
+            }
+        });
+    };
+    /**
+     * Handles the import of self registered web component bundles, i.e. the web component
+     * is added to the customElements registry by the bundle code rather than by luigi.
+     *
+     * @param {*} node the corresponding navigation node
+     * @param {*} viewUrl the source of the wc bundle
+     * @param {*} onload callback function executed after script attached and loaded
+     */
+    WebComponentService.prototype.includeSelfRegisteredWCFromUrl = function (node, viewUrl, onload) {
+        var _this = this;
+        if (this.checkWCUrl(viewUrl)) {
+            /** Append reg function to luigi object if not present */
+            if (!this.containerService.getContainerManager()._registerWebcomponent) {
+                this.containerService.getContainerManager()._registerWebcomponent = function (srcString, el) {
+                    window.customElements.define(_this.generateWCId(srcString), el);
+                };
+            }
+            var scriptTag = document.createElement('script');
+            scriptTag.setAttribute('src', viewUrl);
+            if (node.webcomponent.type === 'module') {
+                scriptTag.setAttribute('type', 'module');
+            }
+            scriptTag.setAttribute('defer', 'true');
+            scriptTag.addEventListener('load', function () {
+                onload();
+            });
+            document.body.appendChild(scriptTag);
+        }
+        else {
+            console.warn("View URL '".concat(viewUrl, "' not allowed to be included"));
+        }
+    };
+    /**
+     * Checks if a url is allowed to be included, based on 'navigation.validWebcomponentUrls' in luigi config.
+     * Returns true, if allowed.
+     *
+     * @param {*} url the url string to check
+     */
+    WebComponentService.prototype.checkWCUrl = function (url) {
+        // if (url.indexOf('://') > 0 || url.trim().indexOf('//') === 0) {
+        //   const ur = new URL(url);
+        //   if (ur.host === window.location.host) {
+        //     return true; // same host is okay
+        //   }
+        //   const valids = LuigiConfig.getConfigValue('navigation.validWebcomponentUrls');
+        //   if (valids && valids.length > 0) {
+        //     for (let el of valids) {
+        //       try {
+        //         if (new RegExp(el).test(url)) {
+        //           return true;
+        //         }
+        //       } catch (e) {
+        //         console.error(e);
+        //       }
+        //     }
+        //   }
+        //   return false;
+        // }
+        // relative URL is okay
+        return true;
+    };
+    /** Adds a web component defined by viewUrl to the wc_container and sets the node context.
+     * If the web component is not defined yet, it gets imported.
+     */
+    WebComponentService.prototype.renderWebComponent = function (viewUrl, wc_container, context, node, nodeId) {
+        var _this = this;
+        var i18nViewUrl = this.processViewUrl(viewUrl, { context: context });
+        var wc_id = node.webcomponent && node.webcomponent.tagName ? node.webcomponent.tagName : this.generateWCId(i18nViewUrl);
+        var wcItemPlaceholder = document.createElement('div');
+        wc_container.appendChild(wcItemPlaceholder);
+        wc_container._luigi_node = node;
+        if (window.customElements.get(wc_id)) {
+            this.attachWC(wc_id, wcItemPlaceholder, wc_container, context, i18nViewUrl, nodeId);
+        }
+        else {
+            /** Custom import function, if defined */
+            if (window.luigiWCFn) {
+                window.luigiWCFn(i18nViewUrl, wc_id, wcItemPlaceholder, function () {
+                    _this.attachWC(wc_id, wcItemPlaceholder, wc_container, context, i18nViewUrl, nodeId);
+                });
+            }
+            else if (node.webcomponent && node.webcomponent.selfRegistered) {
+                this.includeSelfRegisteredWCFromUrl(node, i18nViewUrl, function () {
+                    _this.attachWC(wc_id, wcItemPlaceholder, wc_container, context, i18nViewUrl, nodeId);
+                });
+            }
+            else {
+                this.registerWCFromUrl(i18nViewUrl, wc_id).then(function () {
+                    _this.attachWC(wc_id, wcItemPlaceholder, wc_container, context, i18nViewUrl, nodeId);
+                });
+            }
+        }
+    };
+    /**
+     * Creates a compound container according to the given renderer.
+     * Returns a promise that gets resolved with the created container DOM element.
+     *
+     * @param {DefaultCompoundRenderer} renderer
+     */
+    WebComponentService.prototype.createCompoundContainerAsync = function (renderer, ctx) {
+        var _this = this;
+        return new Promise(function (resolve, reject) {
+            if (renderer.viewUrl) {
+                try {
+                    var wc_id_1 = _this.generateWCId(renderer.viewUrl);
+                    _this.registerWCFromUrl(renderer.viewUrl, wc_id_1).then(function () {
+                        var wc = document.createElement(wc_id_1);
+                        _this.initWC(wc, wc_id_1, wc, renderer.viewUrl, ctx, '_root');
+                        resolve(wc);
+                    });
+                }
+                catch (e) {
+                    reject(e);
+                }
+            }
+            else {
+                resolve(renderer.createCompoundContainer());
+            }
+        });
+    };
+    /**
+     * Responsible for rendering web component compounds based on a renderer or a nesting
+     * micro frontend.
+     *
+     * @param {*} navNode the navigation node defining the compound
+     * @param {*} wc_container the web component container dom element
+     * @param {*} context the luigi node context
+     */
+    WebComponentService.prototype.renderWebComponentCompound = function (navNode, wc_container, context) {
+        var _this = this;
+        var _a;
+        var renderer;
+        if (navNode.webcomponent && navNode.viewUrl) {
+            renderer = new DefaultCompoundRenderer();
+            renderer.viewUrl = this.processViewUrl(navNode.viewUrl, { context: context });
+            renderer.createCompoundItemContainer = function (layoutConfig) {
+                var cnt = document.createElement('div');
+                if (layoutConfig && layoutConfig.slot) {
+                    cnt.setAttribute('slot', layoutConfig.slot);
+                }
+                return cnt;
+            };
+        }
+        else if ((_a = navNode.compound) === null || _a === void 0 ? void 0 : _a.renderer) {
+            renderer = resolveRenderer(navNode.compound.renderer);
+        }
+        renderer = renderer || new DefaultCompoundRenderer();
+        return new Promise(function (resolve) {
+            _this.createCompoundContainerAsync(renderer, context).then(function (compoundCnt) {
+                var _a;
+                var ebListeners = {};
+                compoundCnt.eventBus = {
+                    listeners: ebListeners,
+                    onPublishEvent: function (event, srcNodeId, wcId) {
+                        var listeners = ebListeners[srcNodeId + '.' + event.type] || [];
+                        listeners.push.apply(listeners, (ebListeners['*.' + event.type] || []));
+                        listeners.forEach(function (listenerInfo) {
+                            var target = listenerInfo.wcElement || compoundCnt.querySelector('[nodeId=' + listenerInfo.wcElementId + ']');
+                            if (target) {
+                                target.dispatchEvent(new CustomEvent(listenerInfo.action, {
+                                    detail: listenerInfo.converter ? listenerInfo.converter(event.detail) : event.detail
+                                }));
+                            }
+                            else {
+                                console.debug('Could not find event target', listenerInfo);
+                            }
+                        });
+                    }
+                };
+                (_a = navNode.compound) === null || _a === void 0 ? void 0 : _a.children.forEach(function (wc, index) {
+                    var ctx = __assign(__assign({}, context), wc.context);
+                    var compoundItemCnt = renderer.createCompoundItemContainer(wc.layoutConfig);
+                    compoundItemCnt.eventBus = compoundCnt.eventBus;
+                    renderer.attachCompoundItem(compoundCnt, compoundItemCnt);
+                    var nodeId = wc.id || 'gen_' + index;
+                    _this.renderWebComponent(wc.viewUrl, compoundItemCnt, ctx, wc, nodeId);
+                    registerEventListeners(ebListeners, wc, nodeId);
+                });
+                wc_container.appendChild(compoundCnt);
+                // listener for nesting wc
+                registerEventListeners(ebListeners, navNode.compound, '_root', compoundCnt);
+                resolve(compoundCnt);
+            });
+        });
+    };
+    return WebComponentService;
+}());
+
+/* src/LuigiContainer.svelte generated by Svelte v3.46.4 */
+
+function create_if_block(ctx) {
+	let show_if = !/*isWebComponent*/ ctx[5]();
+	let if_block_anchor;
+	let if_block = show_if && create_if_block_1(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+		},
+		p(ctx, dirty) {
+			if (show_if) if_block.p(ctx, dirty);
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+// (88:2) {#if !isWebComponent()}
+function create_if_block_1(ctx) {
+	let iframe;
+	let iframe_src_value;
+
+	return {
+		c() {
+			iframe = element("iframe");
+			if (!src_url_equal(iframe.src, iframe_src_value = /*viewurl*/ ctx[0])) attr(iframe, "src", iframe_src_value);
+			attr(iframe, "title", /*label*/ ctx[1]);
+		},
+		m(target, anchor) {
+			insert(target, iframe, anchor);
+			/*iframe_binding*/ ctx[8](iframe);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*viewurl*/ 1 && !src_url_equal(iframe.src, iframe_src_value = /*viewurl*/ ctx[0])) {
+				attr(iframe, "src", iframe_src_value);
+			}
+
+			if (dirty & /*label*/ 2) {
+				attr(iframe, "title", /*label*/ ctx[1]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(iframe);
+			/*iframe_binding*/ ctx[8](null);
+		}
+	};
+}
+
+function create_fragment$1(ctx) {
+	let main;
+	let if_block = !/*deferInit*/ ctx[4] && create_if_block(ctx);
+
+	return {
+		c() {
+			main = element("main");
+			if (if_block) if_block.c();
+			this.c = noop;
+			attr(main, "class", /*isWebComponent*/ ctx[5]() ? undefined : 'lui-isolated');
+		},
+		m(target, anchor) {
+			insert(target, main, anchor);
+			if (if_block) if_block.m(main, null);
+			/*main_binding*/ ctx[9](main);
+		},
+		p(ctx, [dirty]) {
+			if (!/*deferInit*/ ctx[4]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					if_block.m(main, null);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(main);
+			if (if_block) if_block.d();
+			/*main_binding*/ ctx[9](null);
+		}
+	};
+}
+
+function instance$1($$self, $$props, $$invalidate) {
+	let { viewurl } = $$props;
+	let { context } = $$props;
+	let { label } = $$props;
+	let { webcomponent } = $$props;
+	let iframeHandle = {};
+	let mainComponent;
+	const containerService = new ContainerService();
+	const webcomponentService = new WebComponentService();
+
+	webcomponentService.createClientAPI = (eventBusElement, nodeId, wc_id) => {
+		return {
+			linkManager: () => {
+				return {
+					navigate: route => {
+						dispatchLuigiEvent('navigation-request', { link: route });
+					}
+				};
+			},
+			uxManager: () => {
+				return {
+					showAlert: alertSettings => {
+						dispatchLuigiEvent('alert-request', alertSettings);
+					},
+					showConfirmationModal: async settings => {
+						return new Promise((resolve, reject) => {
+								dispatchLuigiEvent('confirmation-request', settings, data => {
+									if (data) {
+										resolve(data);
+									} else {
+										reject();
+									}
+								});
+							});
+					}
+				};
+			}, //window.Luigi.ux,
+			getCurrentLocale: () => {
+				
+			}, //() => window.Luigi.i18n().getCurrentLocale(),
+			publishEvent: ev => {
+				
+			}, // if (eventBusElement.eventBus) {
+			// eventBusElement.eventBus.onPublishEvent(ev, nodeId, wc_id);
+			// }
+			
+		};
+	};
+
+	const thisComponent = get_current_component();
+	thisComponent.iframeHandle = iframeHandle;
+	let deferInit = !!thisComponent.attributes['defer-init'];
+
+	thisComponent.init = () => {
+		$$invalidate(4, deferInit = false);
+	};
+
+	containerService.registerContainer(thisComponent);
+
+	function dispatchLuigiEvent(msg, data, callback) {
+		containerService.dispatch(msg, thisComponent, data, callback);
+	}
+
+	function isWebComponent() {
+		return !!webcomponent;
+	}
+
+	onMount(async () => {
+		const ctx = context ? JSON.parse(context) : undefined;
+		console.log(ctx);
+
+		if (isWebComponent()) {
+			$$invalidate(3, mainComponent.innerHTML = '', mainComponent);
+			webcomponentService.renderWebComponent(viewurl, mainComponent, ctx, {});
+		}
+	});
+
+	onDestroy(async () => {
+		
+	});
+
+	function iframe_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			iframeHandle.iframe = $$value;
+			$$invalidate(2, iframeHandle);
+		});
+	}
+
+	function main_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			mainComponent = $$value;
+			$$invalidate(3, mainComponent);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('viewurl' in $$props) $$invalidate(0, viewurl = $$props.viewurl);
+		if ('context' in $$props) $$invalidate(6, context = $$props.context);
+		if ('label' in $$props) $$invalidate(1, label = $$props.label);
+		if ('webcomponent' in $$props) $$invalidate(7, webcomponent = $$props.webcomponent);
+	};
+
+	return [
+		viewurl,
+		label,
+		iframeHandle,
+		mainComponent,
+		deferInit,
+		isWebComponent,
+		context,
+		webcomponent,
+		iframe_binding,
+		main_binding
+	];
+}
+
+class LuigiContainer extends SvelteElement {
+	constructor(options) {
+		super();
+		this.shadowRoot.innerHTML = `<style>main,iframe{width:100%;height:100%;border:none}main.lui-isolated{line-height:0}</style>`;
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance$1,
+			create_fragment$1,
+			safe_not_equal,
+			{
+				viewurl: 0,
+				context: 6,
+				label: 1,
+				webcomponent: 7
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["viewurl", "context", "label", "webcomponent"];
+	}
+
+	get viewurl() {
+		return this.$$.ctx[0];
+	}
+
+	set viewurl(viewurl) {
+		this.$$set({ viewurl });
+		flush();
+	}
+
+	get context() {
+		return this.$$.ctx[6];
+	}
+
+	set context(context) {
+		this.$$set({ context });
+		flush();
+	}
+
+	get label() {
+		return this.$$.ctx[1];
+	}
+
+	set label(label) {
+		this.$$set({ label });
+		flush();
+	}
+
+	get webcomponent() {
+		return this.$$.ctx[7];
+	}
+
+	set webcomponent(webcomponent) {
+		this.$$set({ webcomponent });
+		flush();
+	}
+}
+
+/* src/LuigiCompoundContainer.svelte generated by Svelte v3.46.4 */
+
+function create_fragment(ctx) {
+	let main;
+
+	return {
+		c() {
+			main = element("main");
+			this.c = noop;
+		},
+		m(target, anchor) {
+			insert(target, main, anchor);
+			/*main_binding*/ ctx[2](main);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(main);
+			/*main_binding*/ ctx[2](null);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { context } = $$props;
+
+	let initialized = false;
+	let mainComponent;
+	const containerService = new ContainerService();
+	const webcomponentService = new WebComponentService();
+
+	webcomponentService.createClientAPI = (eventBusElement, nodeId, wc_id) => {
+		return {
+			linkManager: () => {
+				
+			}, //window.Luigi.navigation,
+			uxManager: () => {
+				return {
+					showAlert: alertSettings => {
+						dispatchLuigiEvent('alert-request', alertSettings);
+					},
+					showConfirmationModal: async settings => {
+						return new Promise((resolve, reject) => {
+								dispatchLuigiEvent('confirmation-request', settings, data => {
+									if (data) {
+										resolve(data);
+									} else {
+										reject();
+									}
+								});
+							});
+					}
+				};
+			}, //window.Luigi.ux,
+			getCurrentLocale: () => {
+				
+			}, //() => window.Luigi.i18n().getCurrentLocale(),
+			publishEvent: ev => {
+				console.log('pub', ev);
+
+				if (eventBusElement && eventBusElement.eventBus) {
+					eventBusElement.eventBus.onPublishEvent(ev, nodeId, wc_id);
+				}
+			}
+		};
+	};
+
+	const thisComponent = get_current_component();
+	!!thisComponent.attributes['defer-init'];
+
+	thisComponent.init = () => {
+		if (!thisComponent.compoundConfig || initialized) return;
+		console.log('init compound');
+		const node = { compound: thisComponent.compoundConfig }; // TODO: fill with sth
+
+		webcomponentService.renderWebComponentCompound(node, mainComponent, context).then(compCnt => {
+		});
+
+		initialized = true;
+	};
+
+	containerService.registerContainer(thisComponent);
+
+	function dispatchLuigiEvent(msg, data, callback) {
+		containerService.dispatch(msg, thisComponent, data, callback);
+	}
+
+	onMount(async () => {
+		const ctx = context ? JSON.parse(context) : undefined;
+		console.log(ctx);
+	});
+
+	function main_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			mainComponent = $$value;
+			$$invalidate(0, mainComponent);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('context' in $$props) $$invalidate(1, context = $$props.context);
+	};
+
+	return [mainComponent, context, main_binding];
+}
+
+class LuigiCompoundContainer extends SvelteElement {
+	constructor(options) {
+		super();
+		this.shadowRoot.innerHTML = `<style>main{width:100%;height:100%;border:none}</style>`;
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{ context: 1 },
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["context"];
+	}
+
+	get context() {
+		return this.$$.ctx[1];
+	}
+
+	set context(context) {
+		this.$$set({ context });
+		flush();
+	}
+}
+
+export { LuigiCompoundContainer, LuigiContainer };
+//# sourceMappingURL=bundle.d.ts.map