@veloceapps/sdk 1.0.1 → 2.0.0

package/bundles/veloce-sdk-cms.umd.js

@@ -600,6 +600,8 @@
                     severity: 'error',
                     summary: error,
                 });
+                // bounce back if configuration call has failed
+                _this.lineItem.next(_this.lineItem.value ? Object.assign({}, _this.lineItem.value) : undefined);
                 return rxjs.of();
             }))
                 .subscribe();
@@ -672,14 +674,118 @@
         };
         return ConfigurationService;
     }());
-    ConfigurationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationService, deps: [{ token: i1__namespace.ConfigurationApiService }, { token: i2__namespace.ContextService }, { token: i1__namespace.ConfigurationApiService }, { token: i3__namespace.MessageService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ConfigurationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationService, decorators: [{
+    ConfigurationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationService, deps: [{ token: i1__namespace.ConfigurationApiService }, { token: i2__namespace.ContextService }, { token: i1__namespace.ConfigurationApiService }, { token: i3__namespace.MessageService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ConfigurationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i1__namespace.ConfigurationApiService }, { type: i2__namespace.ContextService }, { type: i1__namespace.ConfigurationApiService }, { type: i3__namespace.MessageService }]; } });
 
+    var parsePath = function (path) {
+        var _a, _b, _c, _d;
+        var segments = path.split('/');
+        var module;
+        var variable;
+        if ((_a = segments[0]) === null || _a === void 0 ? void 0 : _a.startsWith('@')) {
+            module = (_b = segments.shift()) === null || _b === void 0 ? void 0 : _b.substring(1);
+        }
+        if (((_c = segments[segments.length - 1]) === null || _c === void 0 ? void 0 : _c[0]) === ':') {
+            variable = (_d = segments.pop()) === null || _d === void 0 ? void 0 : _d.substring(1);
+        }
+        return {
+            segments: segments,
+            module: module,
+            variable: variable,
+        };
+    };
+    var findElementByModule = function (elements, module, elementName) {
+        var e_1, _e;
+        try {
+            for (var elements_1 = __values(elements), elements_1_1 = elements_1.next(); !elements_1_1.done; elements_1_1 = elements_1.next()) {
+                var el = elements_1_1.value;
+                if (el.module === module && el.name === elementName) {
+                    return el;
+                }
+                var child = findElementByModule(el.children, module, elementName);
+                if (child) {
+                    return child;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (elements_1_1 && !elements_1_1.done && (_e = elements_1.return)) _e.call(elements_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return;
+    };
+    var getAbsolutePath = function (elements, subject, path) {
+        var _a, _b, _c, _d;
+        if (path.module) {
+            return (_a = findElementByModule(elements, path.module, path.segments[0])) === null || _a === void 0 ? void 0 : _a.path;
+        }
+        var subjectSegments = (_c = (_b = subject.path) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [];
+        var isRelativePath = ((_d = path.segments[0]) === null || _d === void 0 ? void 0 : _d[0]) === '.';
+        if (!isRelativePath) {
+            return path.segments.join('/');
+        }
+        var segments = __spreadArray([], __read(path.segments));
+        while (segments.length) {
+            var segment = segments.shift();
+            if (segment === '..') {
+                subjectSegments.pop();
+            }
+            else if (segment) {
+                subjectSegments.push(segment);
+            }
+        }
+        return subjectSegments.join('/');
+    };
+
+    var DynamicModuleService = /** @class */ (function () {
+        function DynamicModuleService() {
+            this._elementsTree = [];
+            this._componentFactories = [];
+        }
+        Object.defineProperty(DynamicModuleService.prototype, "componentFactories", {
+            get: function () {
+                return this._componentFactories;
+            },
+            set: function (data) {
+                this._componentFactories = data;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DynamicModuleService.prototype.getComponentFactory = function (element) {
+            return this.componentFactories.find(function (f) { return f.componentType.path === element.path; });
+        };
+        Object.defineProperty(DynamicModuleService.prototype, "elementsTree", {
+            get: function () {
+                return this._elementsTree;
+            },
+            set: function (tree) {
+                this._elementsTree = tree;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DynamicModuleService.prototype.clear = function () {
+            this._elementsTree = [];
+            this.componentFactories = [];
+        };
+        return DynamicModuleService;
+    }());
+    DynamicModuleService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicModuleService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    DynamicModuleService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicModuleService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicModuleService, decorators: [{
+                type: i0.Injectable
+            }] });
+
     var IOProviderService = /** @class */ (function () {
-        function IOProviderService() {
+        function IOProviderService(dynamicModuleService) {
+            this.dynamicModuleService = dynamicModuleService;
             this.inputs = {};
         }
         IOProviderService.prototype.connect = function (el, name, target) {
@@ -692,18 +798,15 @@
         IOProviderService.prototype.resolveTarget = function (el, name, target) {
             var _a, _b;
             var isHost = !target;
-            if (!isHost) {
-                var _c = __read((_a = target === null || target === void 0 ? void 0 : target.split('#')) !== null && _a !== void 0 ? _a : [], 2), path_1 = _c[0], optionalName = _c[1];
-                var finalName = optionalName !== null && optionalName !== void 0 ? optionalName : name;
-                return this.createSubjectSafe(path_1, finalName);
+            if (isHost) {
+                return this.createSubjectSafe((_a = el.path) !== null && _a !== void 0 ? _a : '', name);
             }
-            var path = (_b = el.path) !== null && _b !== void 0 ? _b : '';
-            var modulePath = el.module ? "[" + el.module + "]" + el.name : undefined;
-            var subject = this.createSubjectSafe(path, name);
-            if (modulePath) {
-                this.createSubjectSafe(modulePath, name, subject);
-            }
-            return subject;
+            var elPath = parsePath(target);
+            var pathIsValue = elPath.segments.length === 1 && elPath.segments[0].startsWith('"') && elPath.segments[0].endsWith('"');
+            var finalName = (_b = elPath.variable) !== null && _b !== void 0 ? _b : name;
+            var value = pathIsValue ? new rxjs.BehaviorSubject(elPath.segments[0].slice(1, -1)) : undefined;
+            var absolutePath = !pathIsValue ? getAbsolutePath(this.dynamicModuleService.elementsTree, el, elPath) : el.path;
+            return this.createSubjectSafe(absolutePath !== null && absolutePath !== void 0 ? absolutePath : '', finalName, value);
         };
         IOProviderService.prototype.createSubjectSafe = function (path, name, subject) {
             if (!this.inputs[path]) {
@@ -716,11 +819,11 @@
         };
         return IOProviderService;
     }());
-    IOProviderService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: IOProviderService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    IOProviderService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: IOProviderService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: IOProviderService, decorators: [{
+    IOProviderService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IOProviderService, deps: [{ token: DynamicModuleService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    IOProviderService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IOProviderService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IOProviderService, decorators: [{
                 type: i0.Injectable
-            }] });
+            }], ctorParameters: function () { return [{ type: DynamicModuleService }]; } });
 
     var TemplatesService = /** @class */ (function () {
         function TemplatesService() {
@@ -734,9 +837,9 @@
         };
         return TemplatesService;
     }());
-    TemplatesService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TemplatesService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    TemplatesService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TemplatesService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TemplatesService, decorators: [{
+    TemplatesService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TemplatesService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TemplatesService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TemplatesService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TemplatesService, decorators: [{
                 type: i0.Injectable
             }] });
 
@@ -774,6 +877,203 @@
         return script.replace(metadataString, JSON.stringify(updated));
     };
 
+    var ElementContextService = /** @class */ (function () {
+        function ElementContextService() {
+        }
+        return ElementContextService;
+    }());
+    ElementContextService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementContextService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ElementContextService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementContextService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementContextService, decorators: [{
+                type: i0.Injectable
+            }] });
+
+    var ElementRendererComponent = /** @class */ (function () {
+        function ElementRendererComponent(parentInjector, dynamicModuleService, elementContext, ioProviderService, configurationService, elementRef, cdr) {
+            this.parentInjector = parentInjector;
+            this.dynamicModuleService = dynamicModuleService;
+            this.elementContext = elementContext;
+            this.ioProviderService = ioProviderService;
+            this.configurationService = configurationService;
+            this.elementRef = elementRef;
+            this.cdr = cdr;
+            this.refs = {};
+            this.destroy$ = new rxjs.Subject();
+        }
+        ElementRendererComponent.prototype.ngOnInit = function () {
+            this.elementContext.metadata = this.meta;
+            this.factory = this.dynamicModuleService.getComponentFactory(this.meta);
+            this.createComponents();
+        };
+        ElementRendererComponent.prototype.ngOnDestroy = function () {
+            this.destroyComponents();
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        ElementRendererComponent.prototype.createComponents = function () {
+            var modelMeta = this.meta.model;
+            if (!modelMeta) {
+                this.refs[core.UUID.UUID()] = this.createComponent();
+                return;
+            }
+            if (modelMeta.lineItem) {
+                this.createFromLineItem(modelMeta.lineItem);
+            }
+            else if (modelMeta.path) {
+                this.createFromPath(modelMeta.path);
+            }
+        };
+        ElementRendererComponent.prototype.createFromPath = function (path) {
+            var _this = this;
+            var array$ = this.ioProviderService.connect(this.meta, 'children$', path);
+            array$ === null || array$ === void 0 ? void 0 : array$.pipe(rxjs.takeUntil(this.destroy$)).subscribe(function (children) {
+                if (!lodash.isArray(children)) {
+                    return;
+                }
+                _this.processChildren(children);
+            });
+        };
+        ElementRendererComponent.prototype.createFromLineItem = function (path) {
+            var _this = this;
+            var _a, _b;
+            var parentComp = this.parentInjector.get(ElementRendererComponent, null);
+            var parentPath = (_a = parentComp === null || parentComp === void 0 ? void 0 : parentComp.meta.model) === null || _a === void 0 ? void 0 : _a.lineItem;
+            var pathBlocks = parseBoundPath(path).reverse();
+            var _c = (_b = pathBlocks[1]) !== null && _b !== void 0 ? _b : {}, property = _c.property, name = _c.name;
+            var finalPath = pathBlocks[0];
+            var children$ = this.getParentLineItem$(parentComp).pipe(rxjs.map(function (model) {
+                var _a;
+                if (property === 'ports' && !finalPath.property && parentPath !== path) {
+                    return (_a = model.lineItems.filter(function (_c) {
+                        var port = _c.port;
+                        return port === name;
+                    })) !== null && _a !== void 0 ? _a : [];
+                }
+                return [model];
+            }));
+            children$.pipe(rxjs.takeUntil(this.destroy$)).subscribe(function (children) {
+                _this.processChildren(children);
+            });
+        };
+        ElementRendererComponent.prototype.processChildren = function (children) {
+            var _this = this;
+            var refs = children.reduce(function (acc, data) {
+                var _c;
+                var _a;
+                var key = String((_a = data === null || data === void 0 ? void 0 : data.id) !== null && _a !== void 0 ? _a : core.UUID.UUID());
+                var ref = _this.refs[key] ? _this.updateComponent(key, data) : _this.createComponent(data);
+                return ref ? Object.assign(Object.assign({}, acc), (_c = {}, _c[key] = ref, _c)) : acc;
+            }, {});
+            var existingKeys = Object.keys(this.refs);
+            var newKeys = Object.keys(refs);
+            lodash.pull.apply(void 0, __spreadArray([existingKeys], __read(newKeys))).forEach(function (key) {
+                _this.destroyComponent(key);
+            });
+            this.refs = refs;
+            this.cdr.detectChanges();
+        };
+        ElementRendererComponent.prototype.getParentLineItem$ = function (parentComp) {
+            var _this = this;
+            var _a;
+            var parentRefs = Object.values((_a = parentComp === null || parentComp === void 0 ? void 0 : parentComp.refs) !== null && _a !== void 0 ? _a : {});
+            var parentRef = parentRefs.find(function (ref) { var _a; return (_a = ref === null || ref === void 0 ? void 0 : ref.location.nativeElement) === null || _a === void 0 ? void 0 : _a.contains(_this.elementRef.nativeElement); });
+            var parentModel$ = parentRef === null || parentRef === void 0 ? void 0 : parentRef.instance.model$;
+            return parentModel$ !== null && parentModel$ !== void 0 ? parentModel$ : this.configurationService.get();
+        };
+        ElementRendererComponent.prototype.createComponent = function (data) {
+            var _a, _b;
+            if (!this.factory) {
+                return;
+            }
+            var componentRef = (_a = this.el) === null || _a === void 0 ? void 0 : _a.createComponent(this.factory);
+            if (componentRef) {
+                componentRef.location.nativeElement.setAttribute('name', this.meta.name);
+                componentRef.location.nativeElement.setAttribute('path', this.meta.path);
+                (_b = componentRef.instance) === null || _b === void 0 ? void 0 : _b.model$.next(data);
+            }
+            return componentRef;
+        };
+        ElementRendererComponent.prototype.updateComponent = function (key, data) {
+            var ref = this.refs[key];
+            ref === null || ref === void 0 ? void 0 : ref.instance.model$.next(data);
+            return ref;
+        };
+        ElementRendererComponent.prototype.destroyComponent = function (key) {
+            var _a;
+            (_a = this.refs[key]) === null || _a === void 0 ? void 0 : _a.destroy();
+            delete this.refs[key];
+        };
+        ElementRendererComponent.prototype.destroyComponents = function () {
+            Object.values(this.refs).forEach(function (ref) { return ref === null || ref === void 0 ? void 0 : ref.destroy(); });
+            this.refs = {};
+        };
+        return ElementRendererComponent;
+    }());
+    ElementRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementRendererComponent, deps: [{ token: i0__namespace.Injector, skipSelf: true }, { token: DynamicModuleService }, { token: ElementContextService }, { token: IOProviderService }, { token: ConfigurationService }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ElementRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: { meta: "meta" }, providers: [ElementContextService], viewQueries: [{ propertyName: "el", first: true, predicate: ["el"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<ng-template #el></ng-template>\n", styles: [":host{display:contents}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementRendererComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'vl-cms-element-renderer',
+                        templateUrl: './element-renderer.component.html',
+                        styleUrls: ['./element-renderer.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        providers: [ElementContextService],
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.Injector, decorators: [{
+                            type: i0.SkipSelf
+                        }] }, { type: DynamicModuleService }, { type: ElementContextService }, { type: IOProviderService }, { type: ConfigurationService }, { type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }];
+        }, propDecorators: { el: [{
+                    type: i0.ViewChild,
+                    args: ['el', { read: i0.ViewContainerRef, static: true }]
+                }], meta: [{
+                    type: i0.Input
+                }] } });
+
+    var ElementChildrenComponent = /** @class */ (function () {
+        function ElementChildrenComponent(elementContext) {
+            this.elementContext = elementContext;
+            this.metadata = this.elementContext.metadata;
+        }
+        return ElementChildrenComponent;
+    }());
+    ElementChildrenComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementChildrenComponent, deps: [{ token: ElementContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ElementChildrenComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ElementChildrenComponent, selector: "element-children", ngImport: i0__namespace, template: "<ng-container *ngIf=\"metadata?.children.length\">\n  <ng-container *ngFor=\"let child of metadata.children\">\n    <vl-cms-element-renderer [meta]=\"child\"></vl-cms-element-renderer>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:contents}\n"], components: [{ type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementChildrenComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/component-selector
+                        selector: 'element-children',
+                        templateUrl: 'element-children.component.html',
+                        styleUrls: ['./element-children.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: ElementContextService }]; } });
+
+    // eslint-disable-next-line @angular-eslint/directive-selector
+    var CustomTemplateDirective = /** @class */ (function () {
+        function CustomTemplateDirective(templateRef, templatesService) {
+            this.templateRef = templateRef;
+            this.templatesService = templatesService;
+        }
+        CustomTemplateDirective.prototype.ngAfterViewInit = function () {
+            if (!this.customTemplate) {
+                return;
+            }
+            this.templatesService.register(this.customTemplate, this.templateRef);
+        };
+        return CustomTemplateDirective;
+    }());
+    CustomTemplateDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomTemplateDirective, deps: [{ token: i0__namespace.TemplateRef }, { token: TemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    CustomTemplateDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CustomTemplateDirective, selector: "[customTemplate]", inputs: { customTemplate: "customTemplate" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomTemplateDirective, decorators: [{
+                type: i0.Directive,
+                args: [{ selector: '[customTemplate]' }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.TemplateRef }, { type: TemplatesService }]; }, propDecorators: { customTemplate: [{
+                    type: i0.Input
+                }] } });
+
     var ConfigurationPlugin = /** @class */ (function () {
         function ConfigurationPlugin(host) {
             this.host = host;
@@ -876,9 +1176,9 @@
         });
         return ConfigurationPlugin;
     }());
-    ConfigurationPlugin.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationPlugin, deps: "invalid", target: i0__namespace.ɵɵFactoryTarget.Directive });
-    ConfigurationPlugin.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: ConfigurationPlugin, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationPlugin, decorators: [{
+    ConfigurationPlugin.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationPlugin, deps: "invalid", target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ConfigurationPlugin.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ConfigurationPlugin, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationPlugin, decorators: [{
                 type: i0.Directive
             }], ctorParameters: function () { return [{ type: undefined }]; } });
 
@@ -948,9 +1248,9 @@
         }
         return ScriptPlugin;
     }());
-    ScriptPlugin.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ScriptPlugin, deps: [{ token: exports.ElementComponent }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    ScriptPlugin.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: ScriptPlugin, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ScriptPlugin, decorators: [{
+    ScriptPlugin.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ScriptPlugin, deps: [{ token: exports.ElementComponent }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ScriptPlugin.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ScriptPlugin, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ScriptPlugin, decorators: [{
                 type: i0.Directive
             }], ctorParameters: function () { return [{ type: exports.ElementComponent }]; } });
 
@@ -989,9 +1289,9 @@
         }
         return IOPlugin;
     }());
-    IOPlugin.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: IOPlugin, deps: [{ token: exports.ElementComponent }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    IOPlugin.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: IOPlugin, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: IOPlugin, decorators: [{
+    IOPlugin.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IOPlugin, deps: [{ token: exports.ElementComponent }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    IOPlugin.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: IOPlugin, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IOPlugin, decorators: [{
                 type: i0.Directive
             }], ctorParameters: function () { return [{ type: exports.ElementComponent }]; } });
 
@@ -1003,235 +1303,112 @@
         CONTAINER: {
             component: exports.ElementComponent,
             template: '<element-children></element-children>',
-            plugins: [],
+            plugins: [IOPlugin],
         },
         SERVICE: {
             component: exports.ElementComponent,
             plugins: [IOPlugin],
         },
+        REFERENCE: {
+            component: exports.ElementComponent,
+            plugins: [IOPlugin],
+        },
     };
 
-    var ElementContextService = /** @class */ (function () {
-        function ElementContextService() {
-        }
-        return ElementContextService;
-    }());
-    ElementContextService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementContextService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ElementContextService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementContextService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementContextService, decorators: [{
-                type: i0.Injectable
-            }] });
-
-    var DynamicModuleService = /** @class */ (function () {
-        function DynamicModuleService() {
-            this._componentFactories = [];
-        }
-        Object.defineProperty(DynamicModuleService.prototype, "componentFactories", {
-            get: function () {
-                return this._componentFactories;
-            },
-            set: function (data) {
-                this._componentFactories = data;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DynamicModuleService.prototype.getComponentFactory = function (element) {
-            return this.componentFactories.find(function (f) { return f.componentType.path === element.path; });
-        };
-        return DynamicModuleService;
-    }());
-    DynamicModuleService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: DynamicModuleService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    DynamicModuleService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: DynamicModuleService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: DynamicModuleService, decorators: [{
-                type: i0.Injectable
-            }] });
-
-    var ElementRendererComponent = /** @class */ (function () {
-        function ElementRendererComponent(parentInjector, dynamicModuleService, elementContext, ioProviderService, configurationService, elementRef, cdr) {
-            this.parentInjector = parentInjector;
-            this.dynamicModuleService = dynamicModuleService;
-            this.elementContext = elementContext;
-            this.ioProviderService = ioProviderService;
-            this.configurationService = configurationService;
-            this.elementRef = elementRef;
-            this.cdr = cdr;
-            this.refs = {};
-            this.destroy$ = new rxjs.Subject();
-        }
-        ElementRendererComponent.prototype.ngOnInit = function () {
-            this.elementContext.metadata = this.meta;
-            this.factory = this.dynamicModuleService.getComponentFactory(this.meta);
-            this.createComponents();
-        };
-        ElementRendererComponent.prototype.ngOnDestroy = function () {
-            this.destroyComponents();
-            this.destroy$.next();
-            this.destroy$.complete();
-        };
-        ElementRendererComponent.prototype.createComponents = function () {
-            var modelMeta = this.meta.model;
-            if (!modelMeta) {
-                this.refs[core.UUID.UUID()] = this.createComponent();
-                return;
+    var ElementsResolver = /** @class */ (function () {
+        function ElementsResolver(uiDef, elements) {
+            var e_1, _b;
+            this.uiDef = uiDef;
+            this.renderableElements = [];
+            this.sharedElements = [];
+            this.elements = this.transpileScripts(elements);
+            var flatElements = this.flattenElements(this.elements);
+            try {
+                for (var flatElements_1 = __values(flatElements), flatElements_1_1 = flatElements_1.next(); !flatElements_1_1.done; flatElements_1_1 = flatElements_1.next()) {
+                    var el = flatElements_1_1.value;
+                    if (this.isSharedElement(el)) {
+                        this.sharedElements.push(el);
+                    }
+                    else {
+                        this.renderableElements.push(el);
+                    }
+                }
             }
-            if (modelMeta.lineItem) {
-                this.createFromLineItem(modelMeta.lineItem);
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (flatElements_1_1 && !flatElements_1_1.done && (_b = flatElements_1.return)) _b.call(flatElements_1);
+                }
+                finally { if (e_1) throw e_1.error; }
             }
-            else if (modelMeta.path) {
-                this.createFromPath(modelMeta.path);
+        }
+        ElementsResolver.prototype.transpile = function (el) {
+            var _a;
+            if (!el.script) {
+                return;
             }
-        };
-        ElementRendererComponent.prototype.createFromPath = function (path) {
-            var _this = this;
-            var array$ = this.ioProviderService.connect(this.meta, 'children$', path);
-            array$ === null || array$ === void 0 ? void 0 : array$.pipe(rxjs.takeUntil(this.destroy$)).subscribe(function (children) {
-                if (!lodash.isArray(children)) {
-                    return;
-                }
-                _this.processChildren(children);
+            var transformed = standalone.transform(el.script, {
+                filename: el.name + '.ts',
+                presets: ['typescript'],
+                sourceMaps: 'inline',
             });
+            return (_a = transformed.code) !== null && _a !== void 0 ? _a : undefined;
         };
-        ElementRendererComponent.prototype.createFromLineItem = function (path) {
+        ElementsResolver.prototype.transpileScripts = function (elements) {
             var _this = this;
-            var _a, _b;
-            var parentComp = this.parentInjector.get(ElementRendererComponent, null);
-            var parentPath = (_a = parentComp === null || parentComp === void 0 ? void 0 : parentComp.meta.model) === null || _a === void 0 ? void 0 : _a.lineItem;
-            var pathBlocks = parseBoundPath(path).reverse();
-            var _c = (_b = pathBlocks[1]) !== null && _b !== void 0 ? _b : {}, property = _c.property, name = _c.name;
-            var finalPath = pathBlocks[0];
-            var children$ = this.getParentLineItem$(parentComp).pipe(rxjs.map(function (model) {
-                var _a;
-                if (property === 'ports' && !finalPath.property && parentPath !== path) {
-                    return (_a = model.lineItems.filter(function (_c) {
-                        var port = _c.port;
-                        return port === name;
-                    })) !== null && _a !== void 0 ? _a : [];
-                }
-                return [model];
-            }));
-            children$.pipe(rxjs.takeUntil(this.destroy$)).subscribe(function (children) {
-                _this.processChildren(children);
-            });
+            return elements.map(function (el) { return (Object.assign(Object.assign({}, el), { script: _this.transpile(el), children: _this.transpileScripts(el.children) })); });
         };
-        ElementRendererComponent.prototype.processChildren = function (children) {
+        ElementsResolver.prototype.flattenElements = function (elements) {
             var _this = this;
-            var refs = children.reduce(function (acc, data) {
-                var _c;
-                var _a;
-                var key = String((_a = data === null || data === void 0 ? void 0 : data.id) !== null && _a !== void 0 ? _a : core.UUID.UUID());
-                var ref = _this.refs[key] ? _this.updateComponent(key, data) : _this.createComponent(data);
-                return ref ? Object.assign(Object.assign({}, acc), (_c = {}, _c[key] = ref, _c)) : acc;
-            }, {});
-            var existingKeys = Object.keys(this.refs);
-            var newKeys = Object.keys(refs);
-            lodash.pull.apply(void 0, __spreadArray([existingKeys], __read(newKeys))).forEach(function (key) {
-                _this.destroyComponent(key);
-            });
-            this.refs = refs;
-            this.cdr.markForCheck();
+            return lodash.flatten(elements.map(function (el) { return __spreadArray([el], __read(_this.flattenElements(el.children))); }));
         };
-        ElementRendererComponent.prototype.getParentLineItem$ = function (parentComp) {
-            var _this = this;
-            var _a;
-            var parentRefs = Object.values((_a = parentComp === null || parentComp === void 0 ? void 0 : parentComp.refs) !== null && _a !== void 0 ? _a : {});
-            var parentRef = parentRefs.find(function (ref) { var _a; return (_a = ref === null || ref === void 0 ? void 0 : ref.location.nativeElement) === null || _a === void 0 ? void 0 : _a.contains(_this.elementRef.nativeElement); });
-            var parentModel$ = parentRef === null || parentRef === void 0 ? void 0 : parentRef.instance.model$;
-            return parentModel$ !== null && parentModel$ !== void 0 ? parentModel$ : this.configurationService.get();
+        ElementsResolver.prototype.isSharedElement = function (el) {
+            return Boolean(el.reference) && el.type !== 'REFERENCE';
         };
-        ElementRendererComponent.prototype.createComponent = function (data) {
-            var _a, _b;
-            if (!this.factory) {
-                return;
-            }
-            var componentRef = (_a = this.el) === null || _a === void 0 ? void 0 : _a.createComponent(this.factory);
-            if (componentRef) {
-                componentRef.location.nativeElement.setAttribute('name', this.meta.name);
-                componentRef.location.nativeElement.setAttribute('path', this.meta.path);
-                (_b = componentRef.instance) === null || _b === void 0 ? void 0 : _b.model$.next(data);
+        ElementsResolver.prototype.processElementMetadata = function (element) {
+            if (element.type === 'REFERENCE') {
+                var sharedElement = this.sharedElements.find(function (el) { return element.reference === el.name; });
+                if (!sharedElement) {
+                    console.warn("Shared element \"" + element.reference + "\" not found");
+                    return;
+                }
+                return Object.assign(Object.assign({}, element), { type: sharedElement.type, template: sharedElement.template, script: sharedElement.script, styles: sharedElement.styles, inputs: Object.assign(Object.assign({}, sharedElement.inputs), element.inputs), outputs: Object.assign(Object.assign({}, sharedElement.outputs), element.outputs) });
             }
-            return componentRef;
+            return element;
         };
-        ElementRendererComponent.prototype.updateComponent = function (key, data) {
-            var ref = this.refs[key];
-            ref === null || ref === void 0 ? void 0 : ref.instance.model$.next(data);
-            return ref;
-        };
-        ElementRendererComponent.prototype.destroyComponent = function (key) {
-            var _a;
-            (_a = this.refs[key]) === null || _a === void 0 ? void 0 : _a.destroy();
-            delete this.refs[key];
-        };
-        ElementRendererComponent.prototype.destroyComponents = function () {
-            Object.values(this.refs).forEach(function (ref) { return ref === null || ref === void 0 ? void 0 : ref.destroy(); });
-            this.refs = {};
-        };
-        return ElementRendererComponent;
-    }());
-    ElementRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementRendererComponent, deps: [{ token: i0__namespace.Injector, skipSelf: true }, { token: DynamicModuleService }, { token: ElementContextService }, { token: IOProviderService }, { token: ConfigurationService }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ElementRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: { meta: "meta" }, providers: [ElementContextService], viewQueries: [{ propertyName: "el", first: true, predicate: ["el"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<ng-template #el></ng-template>\n", styles: [":host{display:contents}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementRendererComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'vl-cms-element-renderer',
-                        templateUrl: './element-renderer.component.html',
-                        styleUrls: ['./element-renderer.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [ElementContextService],
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: i0__namespace.Injector, decorators: [{
-                            type: i0.SkipSelf
-                        }] }, { type: DynamicModuleService }, { type: ElementContextService }, { type: IOProviderService }, { type: ConfigurationService }, { type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }];
-        }, propDecorators: { el: [{
-                    type: i0.ViewChild,
-                    args: ['el', { read: i0.ViewContainerRef, static: true }]
-                }], meta: [{
-                    type: i0.Input
-                }] } });
-
-    var ElementChildrenComponent = /** @class */ (function () {
-        function ElementChildrenComponent(elementContext) {
-            this.elementContext = elementContext;
-            this.metadata = this.elementContext.metadata;
-        }
-        return ElementChildrenComponent;
-    }());
-    ElementChildrenComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementChildrenComponent, deps: [{ token: ElementContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ElementChildrenComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ElementChildrenComponent, selector: "element-children", ngImport: i0__namespace, template: "<ng-container *ngIf=\"metadata?.children.length\">\n  <ng-container *ngFor=\"let child of metadata.children\">\n    <vl-cms-element-renderer [meta]=\"child\"></vl-cms-element-renderer>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:contents}\n"], components: [{ type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementChildrenComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        // eslint-disable-next-line @angular-eslint/component-selector
-                        selector: 'element-children',
-                        templateUrl: 'element-children.component.html',
-                        styleUrls: ['./element-children.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: ElementContextService }]; } });
-
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    var CustomTemplateDirective = /** @class */ (function () {
-        function CustomTemplateDirective(templateRef, templatesService) {
-            this.templateRef = templateRef;
-            this.templatesService = templatesService;
-        }
-        CustomTemplateDirective.prototype.ngAfterViewInit = function () {
-            if (!this.customTemplate) {
+        ElementsResolver.prototype.resolveElement = function (sourceElement) {
+            var element = this.processElementMetadata(sourceElement);
+            if (!element) {
                 return;
             }
-            this.templatesService.register(this.customTemplate, this.templateRef);
+            var config = CONFIG[element.type];
+            var defaultPlugins = DEFAULT_PLUGINS[this.uiDef.type];
+            if (!config) {
+                console.warn("Unknown element type \"" + element.type + "\"");
+                return;
+            }
+            var component = Object.assign(Object.assign({ selector: 'vl-element', template: element.template || config.template || '' }, (element.styles ? { styles: [element.styles] } : {})), { providers: [
+                    { provide: DEFAULT_PLUGINS_TOKEN, useValue: defaultPlugins },
+                    { provide: UI_DEFINITION_METADATA, useValue: this.uiDef },
+                    { provide: ELEMENT_METADATA, useValue: element },
+                    { provide: ELEMENT_CONFIG, useValue: config },
+                ] });
+            var cmp = i0.Component(component)(/** @class */ (function (_super) {
+                __extends(C, _super);
+                function C() {
+                    return _super !== null && _super.apply(this, arguments) || this;
+                }
+                return C;
+            }(config.component)));
+            lodash.set(cmp, 'path', element.path);
+            return cmp;
         };
-        return CustomTemplateDirective;
+        ElementsResolver.prototype.getNgComponents = function () {
+            var _this = this;
+            return this.renderableElements.map(function (el) { return _this.resolveElement(el); }).filter(Boolean);
+        };
+        return ElementsResolver;
     }());
-    CustomTemplateDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CustomTemplateDirective, deps: [{ token: i0__namespace.TemplateRef }, { token: TemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    CustomTemplateDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: CustomTemplateDirective, selector: "[customTemplate]", inputs: { customTemplate: "customTemplate" }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CustomTemplateDirective, decorators: [{
-                type: i0.Directive,
-                args: [{ selector: '[customTemplate]' }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.TemplateRef }, { type: TemplatesService }]; }, propDecorators: { customTemplate: [{
-                    type: i0.Input
-                }] } });
 
     var LauncherService = /** @class */ (function () {
         function LauncherService(compiler, dynamicModuleService) {
@@ -1240,8 +1417,7 @@
         }
         LauncherService.prototype.compileModule = function (elements, uiDefs) {
             var _this = this;
-            var transformedElements = this.transformElements(elements);
-            this.module = this.getModule(transformedElements, uiDefs);
+            this.module = this.getModule(elements, uiDefs);
             return rxjs.from(this.compiler.compileModuleAndAllComponentsAsync(this.module)).pipe(rxjs.tap(function (m) {
                 _this.dynamicModuleService.componentFactories = m.componentFactories;
                 _this.moduleInstance = m;
@@ -1249,7 +1425,7 @@
         };
         LauncherService.prototype.destroy = function () {
             if (this.moduleInstance) {
-                this.dynamicModuleService.componentFactories = [];
+                this.dynamicModuleService.clear();
                 this.moduleInstance = undefined;
             }
             if (this.module) {
@@ -1257,32 +1433,10 @@
                 this.module = undefined;
             }
         };
-        LauncherService.prototype.getComponent = function (element, uiDefs) {
-            var config = CONFIG[element.type];
-            var defaultPlugins = DEFAULT_PLUGINS[uiDefs.type];
-            if (!config) {
-                console.warn("Unknown element type \"" + element.type + "\"");
-                return;
-            }
-            var cmp = i0.Component(Object.assign(Object.assign({ selector: 'vl-element', template: element.template || config.template || '' }, (element.styles ? { styles: [element.styles] } : {})), { providers: [
-                    { provide: DEFAULT_PLUGINS_TOKEN, useValue: defaultPlugins },
-                    { provide: UI_DEFINITION_METADATA, useValue: uiDefs },
-                    { provide: ELEMENT_METADATA, useValue: element },
-                    { provide: ELEMENT_CONFIG, useValue: config },
-                ] }))(/** @class */ (function (_super) {
-                __extends(C, _super);
-                function C() {
-                    return _super !== null && _super.apply(this, arguments) || this;
-                }
-                return C;
-            }(config.component)));
-            lodash.set(cmp, 'path', element.path);
-            return cmp;
-        };
-        LauncherService.prototype.getModule = function (elements, uiDefs) {
-            var _this = this;
+        LauncherService.prototype.getModule = function (elements, uiDef) {
             var staticComponents = [ElementChildrenComponent, ElementRendererComponent, CustomTemplateDirective];
-            var dynamicComponents = elements.map(function (el) { return _this.getComponent(el, uiDefs); }).filter(Boolean);
+            var elementsResolver = new ElementsResolver(uiDef, elements);
+            this.dynamicModuleService.elementsTree = elementsResolver.elements;
             var DynamicModule = /** @class */ (function () {
                 function DynamicModule() {
                 }
@@ -1291,34 +1445,17 @@
             DynamicModule = __decorate([
                 i0.NgModule({
                     imports: [i6.CommonModule, angularForms.ReactiveFormsModule],
-                    declarations: __spreadArray(__spreadArray([], __read(staticComponents)), __read(dynamicComponents)),
+                    declarations: __spreadArray(__spreadArray([], __read(staticComponents)), __read(elementsResolver.getNgComponents())),
                     jit: true,
                 })
             ], DynamicModule);
             return DynamicModule;
         };
-        LauncherService.prototype.transformElements = function (elements) {
-            var _this = this;
-            return lodash.flatten(elements.map(function (el) {
-                var _a;
-                var children = _this.transformElements(el.children);
-                if (!el.script) {
-                    return __spreadArray([el], __read(children));
-                }
-                var transformed = standalone.transform(el.script, {
-                    filename: el.name + '.ts',
-                    presets: ['typescript'],
-                    sourceMaps: 'inline',
-                });
-                var script = (_a = transformed.code) !== null && _a !== void 0 ? _a : undefined;
-                return __spreadArray([Object.assign(Object.assign({}, el), { script: script })], __read(children));
-            }));
-        };
         return LauncherService;
     }());
-    LauncherService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LauncherService, deps: [{ token: i0__namespace.Compiler }, { token: DynamicModuleService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    LauncherService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LauncherService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LauncherService, decorators: [{
+    LauncherService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LauncherService, deps: [{ token: i0__namespace.Compiler }, { token: DynamicModuleService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    LauncherService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LauncherService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LauncherService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i0__namespace.Compiler }, { type: DynamicModuleService }]; } });
 
@@ -1368,9 +1505,9 @@
         };
         return PreviewComponent;
     }());
-    PreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: PreviewComponent, deps: [{ token: LauncherService }, { token: ConfigurationService }, { token: i3__namespace.MessageService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    PreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: PreviewComponent, selector: "vl-cms-preview", inputs: { modelId: "modelId", uiDefinition: "uiDefinition" }, providers: [IOProviderService, ConfigurationService, TemplatesService], ngImport: i0__namespace, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-element-renderer *ngFor=\"let el of elements\" [meta]=\"el\"></vl-cms-element-renderer>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;height:100%}\n"], components: [{ type: i4__namespace.LoaderComponent, selector: "vl-loader", inputs: ["label"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: PreviewComponent, decorators: [{
+    PreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewComponent, deps: [{ token: LauncherService }, { token: ConfigurationService }, { token: i3__namespace.MessageService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PreviewComponent, selector: "vl-cms-preview", inputs: { modelId: "modelId", uiDefinition: "uiDefinition" }, providers: [IOProviderService, ConfigurationService, TemplatesService], ngImport: i0__namespace, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-element-renderer *ngFor=\"let el of elements\" [meta]=\"el\"></vl-cms-element-renderer>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;height:100%;all:unset}\n"], components: [{ type: i4__namespace.LoaderComponent, selector: "vl-loader", inputs: ["label"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'vl-cms-preview',
@@ -1390,10 +1527,10 @@
         }
         return ElementRendererModule;
     }());
-    ElementRendererModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementRendererModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    ElementRendererModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementRendererModule, declarations: [ElementRendererComponent], exports: [ElementRendererComponent] });
-    ElementRendererModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementRendererModule });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementRendererModule, decorators: [{
+    ElementRendererModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementRendererModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    ElementRendererModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementRendererModule, declarations: [ElementRendererComponent], exports: [ElementRendererComponent] });
+    ElementRendererModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementRendererModule });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementRendererModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [ElementRendererComponent],
@@ -1406,10 +1543,10 @@
         }
         return ElementChildrenModule;
     }());
-    ElementChildrenModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementChildrenModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    ElementChildrenModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementChildrenModule, declarations: [ElementChildrenComponent], imports: [ElementRendererModule], exports: [ElementChildrenComponent] });
-    ElementChildrenModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementChildrenModule, imports: [[ElementRendererModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementChildrenModule, decorators: [{
+    ElementChildrenModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementChildrenModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    ElementChildrenModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementChildrenModule, declarations: [ElementChildrenComponent], imports: [ElementRendererModule], exports: [ElementChildrenComponent] });
+    ElementChildrenModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementChildrenModule, imports: [[ElementRendererModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementChildrenModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [ElementChildrenComponent],
@@ -1423,10 +1560,10 @@
         }
         return PreviewModule;
     }());
-    PreviewModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: PreviewModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    PreviewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: PreviewModule, declarations: [PreviewComponent], imports: [i6.CommonModule, i4.LoaderModule, ElementRendererModule, ElementChildrenModule], exports: [PreviewComponent] });
-    PreviewModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: PreviewModule, imports: [[i6.CommonModule, i4.LoaderModule, ElementRendererModule, ElementChildrenModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: PreviewModule, decorators: [{
+    PreviewModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    PreviewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewModule, declarations: [PreviewComponent], imports: [i6.CommonModule, i4.LoaderModule, ElementRendererModule, ElementChildrenModule], exports: [PreviewComponent] });
+    PreviewModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewModule, imports: [[i6.CommonModule, i4.LoaderModule, ElementRendererModule, ElementChildrenModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [PreviewComponent],
@@ -1446,10 +1583,10 @@
         }
         return ConfigurationModule;
     }());
-    ConfigurationModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    ConfigurationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationModule });
-    ConfigurationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationModule, providers: [i2.ContextService, i1.ContextApiService, i1.ProductModelApiService, i1.ConfigurationApiService] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationModule, decorators: [{
+    ConfigurationModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    ConfigurationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationModule });
+    ConfigurationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationModule, providers: [i2.ContextService, i1.ContextApiService, i1.ProductModelApiService, i1.ConfigurationApiService] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         providers: [i2.ContextService, i1.ContextApiService, i1.ProductModelApiService, i1.ConfigurationApiService],
@@ -1461,10 +1598,10 @@
         }
         return LauncherModule;
     }());
-    LauncherModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LauncherModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    LauncherModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LauncherModule, imports: [i6.CommonModule, core.CoreModule, ConfigurationModule] });
-    LauncherModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LauncherModule, providers: [LauncherService, DynamicModuleService], imports: [[i6.CommonModule, core.CoreModule, ConfigurationModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LauncherModule, decorators: [{
+    LauncherModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LauncherModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    LauncherModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LauncherModule, imports: [i6.CommonModule, core.CoreModule, ConfigurationModule] });
+    LauncherModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LauncherModule, providers: [LauncherService, DynamicModuleService], imports: [[i6.CommonModule, core.CoreModule, ConfigurationModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LauncherModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [i6.CommonModule, core.CoreModule, ConfigurationModule],