@veloceapps/sdk 1.0.2 → 2.0.0

package/fesm2015/veloce-sdk-cms.js

@@ -1,6 +1,6 @@
 import { __decorate, __param, __rest } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Injector, Injectable, Directive, ViewContainerRef, SkipSelf, ViewChild, Input, NgModule } from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Injector, Injectable, ViewContainerRef, SkipSelf, ViewChild, Input, Directive, NgModule } from '@angular/core';
 import * as rxjs from 'rxjs';
 import { BehaviorSubject, combineLatest, of, shareReplay, throwError, Subject, takeUntil, map as map$1, from, tap as tap$1, forkJoin, catchError as catchError$1 } from 'rxjs';
 import { EntityUtil, UUID, ConfigurationMode, ConfigurationContextMode, RuntimeModel, CoreModule } from '@veloce/core';
@@ -9,7 +9,7 @@ import { RuntimeMode, RuntimeStep, ContextService } from '@veloce/sdk/runtime';
 import * as rxjsOperators from 'rxjs/operators';
 import { first, switchMap, catchError, map, tap } from 'rxjs/operators';
 import * as lodash from 'lodash';
-import { compact, sortBy, isArray, pull, set, flatten } from 'lodash';
+import { compact, sortBy, isArray, pull, flatten, set } from 'lodash';
 import * as i1 from '@veloce/api';
 import { ContextApiService, ProductModelApiService, ConfigurationApiService } from '@veloce/api';
 import * as i3 from 'primeng/api';
@@ -313,14 +313,98 @@ class ConfigurationService {
         };
     }
 }
-ConfigurationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationService, deps: [{ token: i1.ConfigurationApiService }, { token: i2.ContextService }, { token: i1.ConfigurationApiService }, { token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
-ConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationService, decorators: [{
+ConfigurationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationService, deps: [{ token: i1.ConfigurationApiService }, { token: i2.ContextService }, { token: i1.ConfigurationApiService }, { token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
+ConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.ConfigurationApiService }, { type: i2.ContextService }, { type: i1.ConfigurationApiService }, { type: i3.MessageService }]; } });
 
-class IOProviderService {
+const parsePath = (path) => {
+    var _a, _b, _c, _d;
+    const segments = path.split('/');
+    let module;
+    let 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,
+        module,
+        variable,
+    };
+};
+const findElementByModule = (elements, module, elementName) => {
+    for (const el of elements) {
+        if (el.module === module && el.name === elementName) {
+            return el;
+        }
+        const child = findElementByModule(el.children, module, elementName);
+        if (child) {
+            return child;
+        }
+    }
+    return;
+};
+const getAbsolutePath = (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;
+    }
+    const subjectSegments = (_c = (_b = subject.path) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [];
+    const isRelativePath = ((_d = path.segments[0]) === null || _d === void 0 ? void 0 : _d[0]) === '.';
+    if (!isRelativePath) {
+        return path.segments.join('/');
+    }
+    const segments = [...path.segments];
+    while (segments.length) {
+        const segment = segments.shift();
+        if (segment === '..') {
+            subjectSegments.pop();
+        }
+        else if (segment) {
+            subjectSegments.push(segment);
+        }
+    }
+    return subjectSegments.join('/');
+};
+
+class DynamicModuleService {
     constructor() {
+        this._elementsTree = [];
+        this._componentFactories = [];
+    }
+    set componentFactories(data) {
+        this._componentFactories = data;
+    }
+    get componentFactories() {
+        return this._componentFactories;
+    }
+    getComponentFactory(element) {
+        return this.componentFactories.find(f => f.componentType.path === element.path);
+    }
+    get elementsTree() {
+        return this._elementsTree;
+    }
+    set elementsTree(tree) {
+        this._elementsTree = tree;
+    }
+    clear() {
+        this._elementsTree = [];
+        this.componentFactories = [];
+    }
+}
+DynamicModuleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicModuleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicModuleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicModuleService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicModuleService, decorators: [{
+            type: Injectable
+        }] });
+
+class IOProviderService {
+    constructor(dynamicModuleService) {
+        this.dynamicModuleService = dynamicModuleService;
         this.inputs = {};
     }
     connect(el, name, target) {
@@ -333,18 +417,15 @@ class IOProviderService {
     resolveTarget(el, name, target) {
         var _a, _b;
         const isHost = !target;
-        if (!isHost) {
-            const [path, optionalName] = (_a = target === null || target === void 0 ? void 0 : target.split('#')) !== null && _a !== void 0 ? _a : [];
-            const finalName = optionalName !== null && optionalName !== void 0 ? optionalName : name;
-            return this.createSubjectSafe(path, finalName);
+        if (isHost) {
+            return this.createSubjectSafe((_a = el.path) !== null && _a !== void 0 ? _a : '', name);
         }
-        const path = (_b = el.path) !== null && _b !== void 0 ? _b : '';
-        const modulePath = el.module ? `[${el.module}]${el.name}` : undefined;
-        const subject = this.createSubjectSafe(path, name);
-        if (modulePath) {
-            this.createSubjectSafe(modulePath, name, subject);
-        }
-        return subject;
+        const elPath = parsePath(target);
+        const pathIsValue = elPath.segments.length === 1 && elPath.segments[0].startsWith('"') && elPath.segments[0].endsWith('"');
+        const finalName = (_b = elPath.variable) !== null && _b !== void 0 ? _b : name;
+        const value = pathIsValue ? new BehaviorSubject(elPath.segments[0].slice(1, -1)) : undefined;
+        const absolutePath = !pathIsValue ? getAbsolutePath(this.dynamicModuleService.elementsTree, el, elPath) : el.path;
+        return this.createSubjectSafe(absolutePath !== null && absolutePath !== void 0 ? absolutePath : '', finalName, value);
     }
     createSubjectSafe(path, name, subject) {
         if (!this.inputs[path]) {
@@ -356,11 +437,11 @@ class IOProviderService {
         return this.inputs[path][name];
     }
 }
-IOProviderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: IOProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-IOProviderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: IOProviderService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: IOProviderService, decorators: [{
+IOProviderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IOProviderService, deps: [{ token: DynamicModuleService }], target: i0.ɵɵFactoryTarget.Injectable });
+IOProviderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IOProviderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IOProviderService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: DynamicModuleService }]; } });
 
 class TemplatesService {
     constructor() {
@@ -373,9 +454,9 @@ class TemplatesService {
         return this.templates[name];
     }
 }
-TemplatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TemplatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TemplatesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TemplatesService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TemplatesService, decorators: [{
+TemplatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TemplatesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplatesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplatesService, decorators: [{
             type: Injectable
         }] });
 
@@ -414,6 +495,187 @@ const extendElementMetadata = (script, extend) => {
     return script.replace(metadataString, JSON.stringify(updated));
 };
 
+class ElementContextService {
+}
+ElementContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ElementContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementContextService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementContextService, decorators: [{
+            type: Injectable
+        }] });
+
+class ElementRendererComponent {
+    constructor(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 Subject();
+    }
+    ngOnInit() {
+        this.elementContext.metadata = this.meta;
+        this.factory = this.dynamicModuleService.getComponentFactory(this.meta);
+        this.createComponents();
+    }
+    ngOnDestroy() {
+        this.destroyComponents();
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    createComponents() {
+        const modelMeta = this.meta.model;
+        if (!modelMeta) {
+            this.refs[UUID.UUID()] = this.createComponent();
+            return;
+        }
+        if (modelMeta.lineItem) {
+            this.createFromLineItem(modelMeta.lineItem);
+        }
+        else if (modelMeta.path) {
+            this.createFromPath(modelMeta.path);
+        }
+    }
+    createFromPath(path) {
+        const array$ = this.ioProviderService.connect(this.meta, 'children$', path);
+        array$ === null || array$ === void 0 ? void 0 : array$.pipe(takeUntil(this.destroy$)).subscribe(children => {
+            if (!isArray(children)) {
+                return;
+            }
+            this.processChildren(children);
+        });
+    }
+    createFromLineItem(path) {
+        var _a, _b;
+        const parentComp = this.parentInjector.get(ElementRendererComponent, null);
+        const parentPath = (_a = parentComp === null || parentComp === void 0 ? void 0 : parentComp.meta.model) === null || _a === void 0 ? void 0 : _a.lineItem;
+        const pathBlocks = parseBoundPath(path).reverse();
+        const { property, name } = (_b = pathBlocks[1]) !== null && _b !== void 0 ? _b : {};
+        const finalPath = pathBlocks[0];
+        const children$ = this.getParentLineItem$(parentComp).pipe(map$1(model => {
+            var _a;
+            if (property === 'ports' && !finalPath.property && parentPath !== path) {
+                return (_a = model.lineItems.filter(({ port }) => port === name)) !== null && _a !== void 0 ? _a : [];
+            }
+            return [model];
+        }));
+        children$.pipe(takeUntil(this.destroy$)).subscribe(children => {
+            this.processChildren(children);
+        });
+    }
+    processChildren(children) {
+        const refs = children.reduce((acc, data) => {
+            var _a;
+            const key = String((_a = data === null || data === void 0 ? void 0 : data.id) !== null && _a !== void 0 ? _a : UUID.UUID());
+            const ref = this.refs[key] ? this.updateComponent(key, data) : this.createComponent(data);
+            return ref ? Object.assign(Object.assign({}, acc), { [key]: ref }) : acc;
+        }, {});
+        const existingKeys = Object.keys(this.refs);
+        const newKeys = Object.keys(refs);
+        pull(existingKeys, ...newKeys).forEach(key => {
+            this.destroyComponent(key);
+        });
+        this.refs = refs;
+        this.cdr.detectChanges();
+    }
+    getParentLineItem$(parentComp) {
+        var _a;
+        const parentRefs = Object.values((_a = parentComp === null || parentComp === void 0 ? void 0 : parentComp.refs) !== null && _a !== void 0 ? _a : {});
+        const parentRef = parentRefs.find(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); });
+        const parentModel$ = parentRef === null || parentRef === void 0 ? void 0 : parentRef.instance.model$;
+        return parentModel$ !== null && parentModel$ !== void 0 ? parentModel$ : this.configurationService.get();
+    }
+    createComponent(data) {
+        var _a, _b;
+        if (!this.factory) {
+            return;
+        }
+        const 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;
+    }
+    updateComponent(key, data) {
+        const ref = this.refs[key];
+        ref === null || ref === void 0 ? void 0 : ref.instance.model$.next(data);
+        return ref;
+    }
+    destroyComponent(key) {
+        var _a;
+        (_a = this.refs[key]) === null || _a === void 0 ? void 0 : _a.destroy();
+        delete this.refs[key];
+    }
+    destroyComponents() {
+        Object.values(this.refs).forEach(ref => ref === null || ref === void 0 ? void 0 : ref.destroy());
+        this.refs = {};
+    }
+}
+ElementRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementRendererComponent, deps: [{ token: i0.Injector, skipSelf: true }, { token: DynamicModuleService }, { token: ElementContextService }, { token: IOProviderService }, { token: ConfigurationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ElementRendererComponent.ɵcmp = i0.ɵɵ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: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-template #el></ng-template>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vl-cms-element-renderer',
+                    templateUrl: './element-renderer.component.html',
+                    styleUrls: ['./element-renderer.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [ElementContextService],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector, decorators: [{
+                    type: SkipSelf
+                }] }, { type: DynamicModuleService }, { type: ElementContextService }, { type: IOProviderService }, { type: ConfigurationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { el: [{
+                type: ViewChild,
+                args: ['el', { read: ViewContainerRef, static: true }]
+            }], meta: [{
+                type: Input
+            }] } });
+
+class ElementChildrenComponent {
+    constructor(elementContext) {
+        this.elementContext = elementContext;
+        this.metadata = this.elementContext.metadata;
+    }
+}
+ElementChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementChildrenComponent, deps: [{ token: ElementContextService }], target: i0.ɵɵFactoryTarget.Component });
+ElementChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ElementChildrenComponent, selector: "element-children", ngImport: i0, 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.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementChildrenComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'element-children',
+                    templateUrl: 'element-children.component.html',
+                    styleUrls: ['./element-children.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: ElementContextService }]; } });
+
+// eslint-disable-next-line @angular-eslint/directive-selector
+class CustomTemplateDirective {
+    constructor(templateRef, templatesService) {
+        this.templateRef = templateRef;
+        this.templatesService = templatesService;
+    }
+    ngAfterViewInit() {
+        if (!this.customTemplate) {
+            return;
+        }
+        this.templatesService.register(this.customTemplate, this.templateRef);
+    }
+}
+CustomTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: TemplatesService }], target: i0.ɵɵFactoryTarget.Directive });
+CustomTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CustomTemplateDirective, selector: "[customTemplate]", inputs: { customTemplate: "customTemplate" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[customTemplate]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: TemplatesService }]; }, propDecorators: { customTemplate: [{
+                type: Input
+            }] } });
+
 class ConfigurationPlugin {
     constructor(host) {
         this.host = host;
@@ -498,9 +760,9 @@ class ConfigurationPlugin {
         return this.host;
     }
 }
-ConfigurationPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationPlugin, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-ConfigurationPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: ConfigurationPlugin, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationPlugin, decorators: [{
+ConfigurationPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationPlugin, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+ConfigurationPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ConfigurationPlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationPlugin, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: undefined }]; } });
 
@@ -570,9 +832,9 @@ class ScriptPlugin {
         }
     }
 }
-ScriptPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ScriptPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
-ScriptPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: ScriptPlugin, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ScriptPlugin, decorators: [{
+ScriptPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScriptPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
+ScriptPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ScriptPlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScriptPlugin, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
 
@@ -607,9 +869,9 @@ class IOPlugin {
         });
     }
 }
-IOPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: IOPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
-IOPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: IOPlugin, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: IOPlugin, decorators: [{
+IOPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IOPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
+IOPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: IOPlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IOPlugin, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
 
@@ -621,214 +883,92 @@ const CONFIG = {
     CONTAINER: {
         component: ElementComponent,
         template: '<element-children></element-children>',
-        plugins: [],
+        plugins: [IOPlugin],
     },
     SERVICE: {
         component: ElementComponent,
         plugins: [IOPlugin],
     },
+    REFERENCE: {
+        component: ElementComponent,
+        plugins: [IOPlugin],
+    },
 };
 
-class ElementContextService {
-}
-ElementContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ElementContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementContextService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementContextService, decorators: [{
-            type: Injectable
-        }] });
-
-class DynamicModuleService {
-    constructor() {
-        this._componentFactories = [];
-    }
-    set componentFactories(data) {
-        this._componentFactories = data;
-    }
-    get componentFactories() {
-        return this._componentFactories;
-    }
-    getComponentFactory(element) {
-        return this.componentFactories.find(f => f.componentType.path === element.path);
-    }
-}
-DynamicModuleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: DynamicModuleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DynamicModuleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: DynamicModuleService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: DynamicModuleService, decorators: [{
-            type: Injectable
-        }] });
-
-class ElementRendererComponent {
-    constructor(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 Subject();
-    }
-    ngOnInit() {
-        this.elementContext.metadata = this.meta;
-        this.factory = this.dynamicModuleService.getComponentFactory(this.meta);
-        this.createComponents();
-    }
-    ngOnDestroy() {
-        this.destroyComponents();
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    createComponents() {
-        const modelMeta = this.meta.model;
-        if (!modelMeta) {
-            this.refs[UUID.UUID()] = this.createComponent();
-            return;
-        }
-        if (modelMeta.lineItem) {
-            this.createFromLineItem(modelMeta.lineItem);
-        }
-        else if (modelMeta.path) {
-            this.createFromPath(modelMeta.path);
-        }
-    }
-    createFromPath(path) {
-        const array$ = this.ioProviderService.connect(this.meta, 'children$', path);
-        array$ === null || array$ === void 0 ? void 0 : array$.pipe(takeUntil(this.destroy$)).subscribe(children => {
-            if (!isArray(children)) {
-                return;
+class ElementsResolver {
+    constructor(uiDef, elements) {
+        this.uiDef = uiDef;
+        this.renderableElements = [];
+        this.sharedElements = [];
+        this.elements = this.transpileScripts(elements);
+        const flatElements = this.flattenElements(this.elements);
+        for (const el of flatElements) {
+            if (this.isSharedElement(el)) {
+                this.sharedElements.push(el);
             }
-            this.processChildren(children);
-        });
-    }
-    createFromLineItem(path) {
-        var _a, _b;
-        const parentComp = this.parentInjector.get(ElementRendererComponent, null);
-        const parentPath = (_a = parentComp === null || parentComp === void 0 ? void 0 : parentComp.meta.model) === null || _a === void 0 ? void 0 : _a.lineItem;
-        const pathBlocks = parseBoundPath(path).reverse();
-        const { property, name } = (_b = pathBlocks[1]) !== null && _b !== void 0 ? _b : {};
-        const finalPath = pathBlocks[0];
-        const children$ = this.getParentLineItem$(parentComp).pipe(map$1(model => {
-            var _a;
-            if (property === 'ports' && !finalPath.property && parentPath !== path) {
-                return (_a = model.lineItems.filter(({ port }) => port === name)) !== null && _a !== void 0 ? _a : [];
+            else {
+                this.renderableElements.push(el);
             }
-            return [model];
-        }));
-        children$.pipe(takeUntil(this.destroy$)).subscribe(children => {
-            this.processChildren(children);
-        });
-    }
-    processChildren(children) {
-        const refs = children.reduce((acc, data) => {
-            var _a;
-            const key = String((_a = data === null || data === void 0 ? void 0 : data.id) !== null && _a !== void 0 ? _a : UUID.UUID());
-            const ref = this.refs[key] ? this.updateComponent(key, data) : this.createComponent(data);
-            return ref ? Object.assign(Object.assign({}, acc), { [key]: ref }) : acc;
-        }, {});
-        const existingKeys = Object.keys(this.refs);
-        const newKeys = Object.keys(refs);
-        pull(existingKeys, ...newKeys).forEach(key => {
-            this.destroyComponent(key);
-        });
-        this.refs = refs;
-        this.cdr.markForCheck();
+        }
     }
-    getParentLineItem$(parentComp) {
+    transpile(el) {
         var _a;
-        const parentRefs = Object.values((_a = parentComp === null || parentComp === void 0 ? void 0 : parentComp.refs) !== null && _a !== void 0 ? _a : {});
-        const parentRef = parentRefs.find(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); });
-        const parentModel$ = parentRef === null || parentRef === void 0 ? void 0 : parentRef.instance.model$;
-        return parentModel$ !== null && parentModel$ !== void 0 ? parentModel$ : this.configurationService.get();
-    }
-    createComponent(data) {
-        var _a, _b;
-        if (!this.factory) {
+        if (!el.script) {
             return;
         }
-        const 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;
-    }
-    updateComponent(key, data) {
-        const ref = this.refs[key];
-        ref === null || ref === void 0 ? void 0 : ref.instance.model$.next(data);
-        return ref;
+        const transformed = transform(el.script, {
+            filename: el.name + '.ts',
+            presets: ['typescript'],
+            sourceMaps: 'inline',
+        });
+        return (_a = transformed.code) !== null && _a !== void 0 ? _a : undefined;
     }
-    destroyComponent(key) {
-        var _a;
-        (_a = this.refs[key]) === null || _a === void 0 ? void 0 : _a.destroy();
-        delete this.refs[key];
+    transpileScripts(elements) {
+        return elements.map(el => (Object.assign(Object.assign({}, el), { script: this.transpile(el), children: this.transpileScripts(el.children) })));
     }
-    destroyComponents() {
-        Object.values(this.refs).forEach(ref => ref === null || ref === void 0 ? void 0 : ref.destroy());
-        this.refs = {};
+    flattenElements(elements) {
+        return flatten(elements.map(el => [el, ...this.flattenElements(el.children)]));
     }
-}
-ElementRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementRendererComponent, deps: [{ token: i0.Injector, skipSelf: true }, { token: DynamicModuleService }, { token: ElementContextService }, { token: IOProviderService }, { token: ConfigurationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ElementRendererComponent.ɵcmp = i0.ɵɵ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: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-template #el></ng-template>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementRendererComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'vl-cms-element-renderer',
-                    templateUrl: './element-renderer.component.html',
-                    styleUrls: ['./element-renderer.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [ElementContextService],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Injector, decorators: [{
-                    type: SkipSelf
-                }] }, { type: DynamicModuleService }, { type: ElementContextService }, { type: IOProviderService }, { type: ConfigurationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { el: [{
-                type: ViewChild,
-                args: ['el', { read: ViewContainerRef, static: true }]
-            }], meta: [{
-                type: Input
-            }] } });
-
-class ElementChildrenComponent {
-    constructor(elementContext) {
-        this.elementContext = elementContext;
-        this.metadata = this.elementContext.metadata;
+    isSharedElement(el) {
+        return Boolean(el.reference) && el.type !== 'REFERENCE';
     }
-}
-ElementChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementChildrenComponent, deps: [{ token: ElementContextService }], target: i0.ɵɵFactoryTarget.Component });
-ElementChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ElementChildrenComponent, selector: "element-children", ngImport: i0, 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.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementChildrenComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: 'element-children',
-                    templateUrl: 'element-children.component.html',
-                    styleUrls: ['./element-children.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: ElementContextService }]; } });
-
-// eslint-disable-next-line @angular-eslint/directive-selector
-class CustomTemplateDirective {
-    constructor(templateRef, templatesService) {
-        this.templateRef = templateRef;
-        this.templatesService = templatesService;
+    processElementMetadata(element) {
+        if (element.type === 'REFERENCE') {
+            const sharedElement = this.sharedElements.find(el => 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 element;
     }
-    ngAfterViewInit() {
-        if (!this.customTemplate) {
+    resolveElement(sourceElement) {
+        const element = this.processElementMetadata(sourceElement);
+        if (!element) {
             return;
         }
-        this.templatesService.register(this.customTemplate, this.templateRef);
+        const config = CONFIG[element.type];
+        const defaultPlugins = DEFAULT_PLUGINS[this.uiDef.type];
+        if (!config) {
+            console.warn(`Unknown element type "${element.type}"`);
+            return;
+        }
+        const 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 },
+            ] });
+        const cmp = Component(component)(class C extends config.component {
+        });
+        set(cmp, 'path', element.path);
+        return cmp;
+    }
+    getNgComponents() {
+        return this.renderableElements.map(el => this.resolveElement(el)).filter(Boolean);
     }
 }
-CustomTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: CustomTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: TemplatesService }], target: i0.ɵɵFactoryTarget.Directive });
-CustomTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: CustomTemplateDirective, selector: "[customTemplate]", inputs: { customTemplate: "customTemplate" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: CustomTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[customTemplate]' }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: TemplatesService }]; }, propDecorators: { customTemplate: [{
-                type: Input
-            }] } });
 
 class LauncherService {
     constructor(compiler, dynamicModuleService) {
@@ -836,8 +976,7 @@ class LauncherService {
         this.dynamicModuleService = dynamicModuleService;
     }
     compileModule(elements, uiDefs) {
-        const transformedElements = this.transformElements(elements);
-        this.module = this.getModule(transformedElements, uiDefs);
+        this.module = this.getModule(elements, uiDefs);
         return from(this.compiler.compileModuleAndAllComponentsAsync(this.module)).pipe(tap$1(m => {
             this.dynamicModuleService.componentFactories = m.componentFactories;
             this.moduleInstance = m;
@@ -845,7 +984,7 @@ class LauncherService {
     }
     destroy() {
         if (this.moduleInstance) {
-            this.dynamicModuleService.componentFactories = [];
+            this.dynamicModuleService.clear();
             this.moduleInstance = undefined;
         }
         if (this.module) {
@@ -853,57 +992,25 @@ class LauncherService {
             this.module = undefined;
         }
     }
-    getComponent(element, uiDefs) {
-        const config = CONFIG[element.type];
-        const defaultPlugins = DEFAULT_PLUGINS[uiDefs.type];
-        if (!config) {
-            console.warn(`Unknown element type "${element.type}"`);
-            return;
-        }
-        const cmp = 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 C extends config.component {
-        });
-        set(cmp, 'path', element.path);
-        return cmp;
-    }
-    getModule(elements, uiDefs) {
+    getModule(elements, uiDef) {
         const staticComponents = [ElementChildrenComponent, ElementRendererComponent, CustomTemplateDirective];
-        const dynamicComponents = elements.map(el => this.getComponent(el, uiDefs)).filter(Boolean);
+        const elementsResolver = new ElementsResolver(uiDef, elements);
+        this.dynamicModuleService.elementsTree = elementsResolver.elements;
         let DynamicModule = class DynamicModule {
         };
         DynamicModule = __decorate([
             NgModule({
                 imports: [CommonModule, ReactiveFormsModule],
-                declarations: [...staticComponents, ...dynamicComponents],
+                declarations: [...staticComponents, ...elementsResolver.getNgComponents()],
                 jit: true,
             })
         ], DynamicModule);
         return DynamicModule;
     }
-    transformElements(elements) {
-        return flatten(elements.map(el => {
-            var _a;
-            const children = this.transformElements(el.children);
-            if (!el.script) {
-                return [el, ...children];
-            }
-            const transformed = transform(el.script, {
-                filename: el.name + '.ts',
-                presets: ['typescript'],
-                sourceMaps: 'inline',
-            });
-            const script = (_a = transformed.code) !== null && _a !== void 0 ? _a : undefined;
-            return [Object.assign(Object.assign({}, el), { script }), ...children];
-        }));
-    }
 }
-LauncherService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LauncherService, deps: [{ token: i0.Compiler }, { token: DynamicModuleService }], target: i0.ɵɵFactoryTarget.Injectable });
-LauncherService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LauncherService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LauncherService, decorators: [{
+LauncherService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LauncherService, deps: [{ token: i0.Compiler }, { token: DynamicModuleService }], target: i0.ɵɵFactoryTarget.Injectable });
+LauncherService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LauncherService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LauncherService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Compiler }, { type: DynamicModuleService }]; } });
 
@@ -951,9 +1058,9 @@ class PreviewComponent {
             .subscribe();
     }
 }
-PreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: PreviewComponent, deps: [{ token: LauncherService }, { token: ConfigurationService }, { token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Component });
-PreviewComponent.ɵcmp = i0.ɵɵ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, 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.LoaderComponent, selector: "vl-loader", inputs: ["label"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: PreviewComponent, decorators: [{
+PreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewComponent, deps: [{ token: LauncherService }, { token: ConfigurationService }, { token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Component });
+PreviewComponent.ɵcmp = i0.ɵɵ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, 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.LoaderComponent, selector: "vl-loader", inputs: ["label"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'vl-cms-preview',
@@ -970,10 +1077,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
 
 class ElementRendererModule {
 }
-ElementRendererModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElementRendererModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementRendererModule, declarations: [ElementRendererComponent], exports: [ElementRendererComponent] });
-ElementRendererModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementRendererModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementRendererModule, decorators: [{
+ElementRendererModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElementRendererModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementRendererModule, declarations: [ElementRendererComponent], exports: [ElementRendererComponent] });
+ElementRendererModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementRendererModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementRendererModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ElementRendererComponent],
@@ -983,10 +1090,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
 
 class ElementChildrenModule {
 }
-ElementChildrenModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementChildrenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElementChildrenModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementChildrenModule, declarations: [ElementChildrenComponent], imports: [ElementRendererModule], exports: [ElementChildrenComponent] });
-ElementChildrenModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementChildrenModule, imports: [[ElementRendererModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementChildrenModule, decorators: [{
+ElementChildrenModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementChildrenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElementChildrenModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementChildrenModule, declarations: [ElementChildrenComponent], imports: [ElementRendererModule], exports: [ElementChildrenComponent] });
+ElementChildrenModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementChildrenModule, imports: [[ElementRendererModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementChildrenModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ElementChildrenComponent],
@@ -997,10 +1104,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
 
 class PreviewModule {
 }
-PreviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: PreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PreviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: PreviewModule, declarations: [PreviewComponent], imports: [CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule], exports: [PreviewComponent] });
-PreviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: PreviewModule, imports: [[CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: PreviewModule, decorators: [{
+PreviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PreviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewModule, declarations: [PreviewComponent], imports: [CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule], exports: [PreviewComponent] });
+PreviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewModule, imports: [[CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PreviewComponent],
@@ -1017,10 +1124,10 @@ function ElementDefinition(definition) {
 
 class ConfigurationModule {
 }
-ConfigurationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ConfigurationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationModule });
-ConfigurationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationModule, providers: [ContextService, ContextApiService, ProductModelApiService, ConfigurationApiService] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationModule, decorators: [{
+ConfigurationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ConfigurationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationModule });
+ConfigurationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationModule, providers: [ContextService, ContextApiService, ProductModelApiService, ConfigurationApiService] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [ContextService, ContextApiService, ProductModelApiService, ConfigurationApiService],
@@ -1029,10 +1136,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
 
 class LauncherModule {
 }
-LauncherModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LauncherModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LauncherModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LauncherModule, imports: [CommonModule, CoreModule, ConfigurationModule] });
-LauncherModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LauncherModule, providers: [LauncherService, DynamicModuleService], imports: [[CommonModule, CoreModule, ConfigurationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LauncherModule, decorators: [{
+LauncherModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LauncherModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LauncherModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LauncherModule, imports: [CommonModule, CoreModule, ConfigurationModule] });
+LauncherModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LauncherModule, providers: [LauncherService, DynamicModuleService], imports: [[CommonModule, CoreModule, ConfigurationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LauncherModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, CoreModule, ConfigurationModule],