@veloceapps/sdk 6.0.0-32 → 6.0.0-33

package/fesm2015/veloceapps-sdk-cms.js

@@ -1,26 +1,29 @@
-import { __decorate, __param, __awaiter, __rest } from 'tslib';
+import { __decorate, __param, __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Injector, Injectable, Directive, ViewContainerRef, SkipSelf, ViewChild, Input, NgModule, ViewEncapsulation } from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Injector, Injectable, ViewContainerRef, SkipSelf, ViewChild, Input, ViewEncapsulation, NgModule, Directive, ElementRef } from '@angular/core';
 import * as rxjs from 'rxjs';
-import { BehaviorSubject, Subject, takeUntil, map, filter, from, tap, of, switchMap, forkJoin, catchError } from 'rxjs';
+import { BehaviorSubject, Subject, of, map, tap, switchMap, startWith, distinctUntilChanged, filter, takeUntil, forkJoin, catchError, ReplaySubject, combineLatest, from } from 'rxjs';
 import * as lodash from 'lodash';
-import { compact, flatten, isArray, pull, set, kebabCase } from 'lodash';
+import { compact, isArray, pull, merge, flatten, set, kebabCase, omit } from 'lodash';
+import { applyPatch } from 'rfc6902';
+import * as i2 from '@veloceapps/sdk/core';
+import { ConfigurationService, LineItemWorker, generateLineItem, getAttributeValue, QuoteDraftService, FlowConfigurationService, ProductImagesService, ContextService, lineItemUtils, SdkCoreModule } from '@veloceapps/sdk/core';
+import * as i3 from 'primeng/api';
+import * as i5 from '@veloceapps/components';
+import { LetDirectiveModule, LoaderModule, ToastService } from '@veloceapps/components';
+import { UUID, isDefined, CoreModule } from '@veloceapps/core';
 import * as i7 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
-import { UUID, CoreModule } from '@veloceapps/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import * as i2$1 from 'ngx-drag-drop';
+import { DndModule } from 'ngx-drag-drop';
+import { SalesforceApiService, QuoteApiService, DocumentTemplatesApiService, DocumentAttachmentApiService, RampApiService, CatalogApiService, DeltaApiService, PicklistsApiService, PriceApiService, ShoppingCartSettingsApiService, ConfigurationSettingsApiService, ApiModule } from '@veloceapps/api';
+import { DialogService } from 'primeng/dynamicdialog';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as angularForms from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i2 from '@veloceapps/sdk/core';
-import { ConfigurationService, LineItemWorker, generateLineItem, getAttributeValue, QuoteDraftService, FlowConfigurationService, ProductImagesService, ContextService, lineItemUtils, SdkCoreModule } from '@veloceapps/sdk/core';
-import * as i1 from '@veloceapps/components';
-import { LoaderModule, ToastService } from '@veloceapps/components';
 import { transform } from '@babel/standalone';
-import { SalesforceApiService, QuoteApiService, DocumentTemplatesApiService, DocumentAttachmentApiService, RampApiService, CatalogApiService, DeltaApiService, PicklistsApiService, PriceApiService, ShoppingCartSettingsApiService, ConfigurationSettingsApiService, ApiModule } from '@veloceapps/api';
 import * as rxjsOperators from 'rxjs/operators';
-import * as i3 from 'primeng/api';
-import { DialogService } from 'primeng/dynamicdialog';
 
 var FlowAction;
 (function (FlowAction) {
@@ -156,6 +159,88 @@ ElementComponent = __decorate([
     __param(0, Inject(Injector))
 ], ElementComponent);
 
+function getElementUniqueName(collection, name, comparator) {
+    let result = '';
+    let index = 0;
+    while (!result) {
+        const candidate = name + (index ? ` (${index})` : '');
+        const exists = collection.some(comparator(candidate));
+        if (!exists) {
+            result = candidate;
+        }
+        else {
+            index++;
+        }
+    }
+    return result;
+}
+const insertElementAt = (source, target, parentPath, index) => {
+    const result = [...source];
+    const name = getElementUniqueName(result, target.name, (name) => (el) => el.name === name);
+    const path = parentPath ? `${parentPath}/${name}` : name;
+    result.splice(index, 0, Object.assign(Object.assign({}, target), { path, name }));
+    return result;
+};
+const insertElement = (source, target, path, index) => {
+    if (!path) {
+        return insertElementAt(source, target, '', index);
+    }
+    return source.map(element => {
+        var _a;
+        if (element.path === path) {
+            return Object.assign(Object.assign({}, element), { children: insertElementAt(element.children, target, element.path, index) });
+        }
+        else if ((_a = element.path) === null || _a === void 0 ? void 0 : _a.startsWith(path)) {
+            return Object.assign(Object.assign({}, element), { children: insertElement(element.children, target, path, index) });
+        }
+        else {
+            return element;
+        }
+    });
+};
+const removeElement = (source, path) => {
+    return source.reduce((trunk, element) => {
+        if (path === element.path) {
+            return trunk;
+        }
+        if (element.path) {
+            if (path.startsWith(element.path)) {
+                trunk.push(Object.assign(Object.assign({}, element), { children: removeElement(element.children, path) }));
+            }
+            else {
+                trunk.push(element);
+            }
+        }
+        return trunk;
+    }, []);
+};
+const findElementByPath = (source, path) => {
+    for (const el of source) {
+        if (el.path === path) {
+            return el;
+        }
+        if (el.path && path.startsWith(el.path)) {
+            const found = findElementByPath(el.children, path);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return;
+};
+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 parseBoundPath = (path) => {
     var _a, _b;
     const regexp = new RegExp(`(?:\\/)(?:\\w+)(?:\\/)(?:ports|attributes)(?:\\/)(?:\\w+)|(?:\\/)(?:\\w+)`, 'g');
@@ -188,18 +273,6 @@ const parsePath = (path) => {
         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;
     if (path.module) {
@@ -222,40 +295,79 @@ const getAbsolutePath = (elements, subject, path) => {
     return subjectSegments.join('/');
 };
 
-class DynamicModuleService {
-    constructor() {
-        this._elementsTree = [];
-        this._componentFactories = [];
-    }
-    set componentFactories(data) {
-        this._componentFactories = data;
-    }
-    get componentFactories() {
-        return this._componentFactories;
+const CMS_COMPILATION_SERVICE = new InjectionToken('VENDOR_MAP');
+
+class RuntimeService {
+    constructor(injector) {
+        this.injector = injector;
+        this.modules = [];
+        this.componentFactories = {};
+        this.applicationTree = [];
+        this.isInitialized$ = new BehaviorSubject(false);
+        this.updated$ = new Subject();
+        this.compilationService = this.injector.get(CMS_COMPILATION_SERVICE);
+    }
+    initialize$(uiDefinition, config) {
+        this.config = config;
+        if (!uiDefinition) {
+            return of([]);
+        }
+        return this.compilationService.compileUIDefinition$(uiDefinition).pipe(map(result => {
+            this.applicationTree = result.elements;
+            this.addComponentFactories(result.module.componentFactories);
+            return result.elements;
+        }), tap(() => this.isInitialized$.next(true)));
+    }
+    applyPatch$(patch) {
+        let observable$ = of(undefined);
+        patch.forEach(operation => {
+            switch (operation.op) {
+                case 'add': {
+                    observable$ = observable$.pipe(switchMap(() => this.addElement$(operation)));
+                    break;
+                }
+                case 'remove': {
+                    observable$ = observable$.pipe(map(() => this.deleteElement(operation)));
+                    break;
+                }
+                default:
+                    observable$ = of();
+            }
+        });
+        return observable$.pipe(tap(() => this.updated$.next()));
     }
-    getComponentFactory(element) {
-        return this.componentFactories.find(f => f.componentType.path === element.path);
+    getCompiledElement$(path) {
+        return this.updated$.pipe(startWith(undefined), map(() => findElementByPath(this.applicationTree, path)), distinctUntilChanged());
     }
-    get elementsTree() {
-        return this._elementsTree;
+    clear() {
+        this.compilationService.clearModuleCache(this.modules);
+        this.modules = [];
+        this.applicationTree = [];
+        this.componentFactories = {};
+        this.isInitialized$.next(false);
+    }
+    addElement$(operation) {
+        return this.compilationService.compileElement$(operation.value).pipe(map(result => {
+            this.addComponentFactories(result.module.componentFactories);
+            applyPatch(this.applicationTree, [Object.assign(Object.assign({}, operation), { value: result.elements[0] })]);
+        }));
     }
-    set elementsTree(tree) {
-        this._elementsTree = tree;
+    deleteElement(operation) {
+        applyPatch(this.applicationTree, [operation]);
     }
-    clear() {
-        this._elementsTree = [];
-        this.componentFactories = [];
+    addComponentFactories(list) {
+        list.forEach(item => (this.componentFactories[item.componentType.path] = item));
     }
 }
-DynamicModuleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicModuleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DynamicModuleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicModuleService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicModuleService, decorators: [{
+RuntimeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RuntimeService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+RuntimeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RuntimeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RuntimeService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 class IOProviderService {
-    constructor(dynamicModuleService) {
-        this.dynamicModuleService = dynamicModuleService;
+    constructor(runtimeService) {
+        this.runtimeService = runtimeService;
         this.inputs = {};
     }
     connect(el, name, target) {
@@ -275,7 +387,7 @@ class IOProviderService {
         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;
+        const absolutePath = !pathIsValue ? getAbsolutePath(this.runtimeService.applicationTree, el, elPath) : el.path;
         return this.createSubjectSafe(absolutePath !== null && absolutePath !== void 0 ? absolutePath : '', finalName, value);
     }
     createSubjectSafe(path, name, subject) {
@@ -293,11 +405,11 @@ class IOProviderService {
         return this.inputs[path][name];
     }
 }
-IOProviderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IOProviderService, deps: [{ token: DynamicModuleService }], target: i0.ɵɵFactoryTarget.Injectable });
+IOProviderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IOProviderService, deps: [{ token: RuntimeService }], target: i0.ɵɵFactoryTarget.Injectable });
 IOProviderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IOProviderService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IOProviderService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: DynamicModuleService }]; } });
+        }], ctorParameters: function () { return [{ type: RuntimeService }]; } });
 
 class TemplatesService {
     constructor() {
@@ -327,323 +439,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }] });
 
-class IOPlugin {
-    constructor(host) {
-        var _a, _b;
-        this.host = host;
-        const elementMetadata = this.host.injector.get(ELEMENT_METADATA);
-        const inputProvider = this.host.injector.get(IOProviderService);
-        const inputs = Object.entries((_a = elementMetadata.inputs) !== null && _a !== void 0 ? _a : {});
-        const outputs = Object.entries((_b = elementMetadata.outputs) !== null && _b !== void 0 ? _b : {});
-        inputs.forEach(([key, path]) => {
-            var _a;
-            if (path && typeof path !== 'string') {
-                console.error(`The value of '${key}' input should be a string`);
-            }
-            if (((_a = elementMetadata.outputs) === null || _a === void 0 ? void 0 : _a[key]) !== undefined) {
-                console.warn(`'${key}' appears both in inputs and outputs. To prevent inconsistent behavior please keep them unique `);
-            }
-            this.host[key] = inputProvider.connect(elementMetadata, key, path);
-        });
-        outputs.forEach(([key, path]) => {
-            if (path && typeof path !== 'string') {
-                console.error(`The value of '${key}' output should be a string`);
-            }
-            this.host[key] = inputProvider.provide(elementMetadata, key, path);
-        });
+const InitAction = { type: 'INIT' };
+const ClearAction = { type: 'CLEAR' };
+class IntegrationState {
+    constructor() {
+        this.stateSubj$ = new BehaviorSubject({});
+        this.action$ = new BehaviorSubject(InitAction);
+    }
+    get state$() {
+        return this.stateSubj$.asObservable();
+    }
+    get state() {
+        return this.stateSubj$.getValue();
+    }
+    patchState(update) {
+        this.stateSubj$.next(Object.assign(Object.assign({}, this.stateSubj$.getValue()), update));
+    }
+    dispatch(action) {
+        this.action$.next(action);
+    }
+    listen$(actionType) {
+        return this.action$.pipe(filter(action => action.type === actionType), map(action => action.payload));
+    }
+    listenAll$() {
+        return this.action$.asObservable();
+    }
+    clear() {
+        this.stateSubj$.next({});
+        this.action$.next(ClearAction);
     }
 }
-IOPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IOPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
-IOPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: IOPlugin, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IOPlugin, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
+IntegrationState.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IntegrationState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+IntegrationState.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IntegrationState, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IntegrationState, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-class ScriptPlugin {
-    constructor(host) {
-        this.host = host;
-        this.normalizeImports = (script, elementPath) => {
-            const regexp = new RegExp(`import([ \\n\\t]*(?:[^ \\n\\t\\{\\}]+[ \\n\\t]*,?)?(?:[ \\n\\t]*\\{(?:[ \\n\\t]*[^ \\n\\t"'\\{\\}]+[ \\n\\t]*,?)+\\})?[ \\n\\t]*)from[ \\n\\t]*(['"])([^'"\\n]+)(?:['"]);`, 'g');
-            const result = script.replace(regexp, (match, g1, g2, src) => {
-                const imports = g1
-                    .trim()
-                    .slice(1, -1)
-                    .split(',')
-                    .map(item => item.trim());
-                imports.forEach(item => {
-                    var _a;
-                    if (!((_a = this.vendorMap[src]) === null || _a === void 0 ? void 0 : _a[item])) {
-                        throw new Error(`Failed to import ${item} from '${src}' in ${elementPath}/script.ts`);
-                    }
-                });
-                return `const ${g1} = vendor['${src}'];`;
-            });
-            return result;
-        };
-        this.document = this.host.injector.get(DOCUMENT);
-        this.vendorMap = this.host.injector.get(VENDOR_MAP);
-        const elementMetadata = this.host.injector.get(ELEMENT_METADATA);
-        const sharedElementMetadata = this.host.injector.get(SHARED_ELEMENT_METADATA);
-        this.addScript(sharedElementMetadata);
-        this.addScript(elementMetadata);
+class ElementContextService {
+}
+ElementContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ElementContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementContextService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementContextService, decorators: [{
+            type: Injectable
+        }] });
+
+class ElementRendererComponent {
+    constructor(parentInjector, runtimeService, elementContext, ioProviderService, configurationService, elementRef, cdr) {
+        this.parentInjector = parentInjector;
+        this.runtimeService = runtimeService;
+        this.elementContext = elementContext;
+        this.ioProviderService = ioProviderService;
+        this.configurationService = configurationService;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.refs = {};
+        this.destroy$ = new Subject();
     }
-    addScript(metadata) {
-        var _a;
-        if (!(metadata === null || metadata === void 0 ? void 0 : metadata.script)) {
+    ngOnInit() {
+        this.elementContext.metadata = this.meta;
+        this.factory = this.meta.path ? this.runtimeService.componentFactories[this.meta.path] : undefined;
+        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;
         }
-        const id = btoa(UUID.UUID());
-        const script = this.document.createElement('script');
-        script.type = `text/javascript`;
-        let scriptContent = this.normalizeImports(metadata.script, (_a = metadata.path) !== null && _a !== void 0 ? _a : metadata.name);
-        const classMatch = /export class (\S+)/.exec(scriptContent);
-        const className = classMatch === null || classMatch === void 0 ? void 0 : classMatch[1];
-        if (!classMatch || !className) {
-            console.error("Script doesn't have exported class");
-            return;
+        if (modelMeta.lineItem) {
+            this.createFromLineItem(modelMeta.lineItem);
         }
-        scriptContent = scriptContent.replace(classMatch[0], `class ${className}`);
-        script.text = `var ${id} = function(vendor) {${scriptContent}
-        return ${className}; };`;
-        this.document.body.appendChild(script);
-        const ScriptClass = window[id](this.vendorMap);
-        if (ScriptClass instanceof Object) {
-            this.host.registerPlugin(new ScriptClass(this.host));
-        }
-        this.document.body.removeChild(script);
-    }
-}
-ScriptPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ScriptPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
-ScriptPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ScriptPlugin, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ScriptPlugin, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
-
-/*
- * ScriptPlugin must always be the last plugin in the list to make sure user code is running after all pre-initializers.
- */
-const CONFIG = {
-    CUSTOM: {
-        component: ElementComponent,
-        plugins: [IOPlugin, ScriptPlugin],
-    },
-    CONTAINER: {
-        component: ElementComponent,
-        defaultTemplate: '<element-children></element-children>',
-        plugins: [ScriptPlugin],
-    },
-    SERVICE: {
-        component: ElementComponent,
-        plugins: [IOPlugin, ScriptPlugin],
-        suppressTemplate: true,
-        suppressStyles: true,
-    },
-    REFERENCE: {
-        component: ElementComponent,
-        plugins: [IOPlugin, ScriptPlugin],
-        suppressTemplate: true,
-    },
-};
-
-const EXPORTED_CLASS_REGEX = /export class (\S+)/;
-const METADATA_DECORATOR_REGEX = /@ElementDefinition\(([\s\S]+)\)(\n|\r\n|.)*export class/g;
-class UiBuildError extends Error {
-    constructor(message, affectedMetadata) {
-        super(message);
-        this.name = this.constructor.name;
-        this.affectedMetadata = affectedMetadata;
-    }
-}
-const elementToMetadata = (el, parentPath) => {
-    var _a;
-    const script = el.script && window.atob(el.script);
-    const template = el.template && window.atob(el.template);
-    const styles = el.styles && window.atob(el.styles);
-    const exportedClassName = script && ((_a = EXPORTED_CLASS_REGEX.exec(script)) !== null && _a !== void 0 ? _a : [])[1];
-    if (!exportedClassName) {
-        throw new Error("Script doesn't have exported class");
-    }
-    const elementMetadata = extractElementMetadata(script || '');
-    const path = (parentPath ? parentPath + '/' : '') + elementMetadata.name;
-    return Object.assign(Object.assign({}, elementMetadata), { path, script: script === null || script === void 0 ? void 0 : script.replace(METADATA_DECORATOR_REGEX, 'export class'), template,
-        styles, children: el.children.map(child => elementToMetadata(child, path)) });
-};
-const metadataToElement = (metadata, recursive = true) => {
-    const elMetadata = {
-        name: metadata.name,
-        isShared: metadata.isShared,
-        type: metadata.type,
-        model: metadata.model,
-        module: metadata.module,
-        reference: metadata.reference,
-        inputs: metadata.inputs,
-        outputs: metadata.outputs,
-        children: metadata.children.map(({ name }) => name),
-        configuredStyles: metadata.configuredStyles,
-    };
-    const normalizedElMetadata = normalizeElementMetadata(elMetadata);
-    if (!metadata.script || !EXPORTED_CLASS_REGEX.test(metadata.script)) {
-        throw new UiBuildError(`'${metadata.name}' component script is missing an exported class`, metadata);
-    }
-    const script = metadata.script &&
-        window.btoa(metadata.script.replace(EXPORTED_CLASS_REGEX, `@ElementDefinition(${stringifyElementMetadata(normalizedElMetadata)})\nexport class Script`));
-    const template = metadata.template && window.btoa(metadata.template);
-    const styles = metadata.styles && window.btoa(metadata.styles);
-    return {
-        script,
-        template,
-        styles,
-        children: recursive ? metadata.children.map(meta => metadataToElement(meta)) : [],
-    };
-};
-const normalizeElementMetadata = (elementMetadata) => {
-    var _a, _b, _c, _d;
-    const metadata = Object.assign({}, elementMetadata);
-    // model
-    const { lineItem, path } = (_a = metadata.model) !== null && _a !== void 0 ? _a : {};
-    const model = lineItem ? { lineItem } : path ? { path } : undefined;
-    if (model) {
-        metadata.model = model;
-    }
-    else {
-        delete metadata.model;
-    }
-    // module
-    if (!metadata.module) {
-        delete metadata.module;
-    }
-    // reference
-    if (!metadata.reference) {
-        delete metadata.reference;
-    }
-    // inputs
-    const inputs = Object.entries((_b = metadata.inputs) !== null && _b !== void 0 ? _b : {}).reduce((acc, [key, value]) => {
-        return Object.assign(Object.assign({}, acc), { [key]: value || null });
-    }, {});
-    if (inputs && Object.keys(inputs).length > 0) {
-        metadata.inputs = inputs;
-    }
-    else {
-        delete metadata.inputs;
-    }
-    // outputs
-    const outputs = Object.entries((_c = metadata.outputs) !== null && _c !== void 0 ? _c : {}).reduce((acc, [key, value]) => {
-        return Object.assign(Object.assign({}, acc), { [key]: value || null });
-    }, {});
-    if (outputs && Object.keys(outputs).length > 0) {
-        metadata.outputs = outputs;
-    }
-    else {
-        delete metadata.outputs;
-    }
-    // children
-    if (!((_d = metadata.children) === null || _d === void 0 ? void 0 : _d.length)) {
-        delete metadata.children;
-    }
-    // isShared
-    if (!metadata.isShared) {
-        delete metadata.isShared;
-    }
-    // configuredStyles
-    if (!metadata.configuredStyles) {
-        delete metadata.configuredStyles;
-    }
-    return metadata;
-};
-const extractElementMetadata = (script) => {
-    var _a;
-    const metadataString = ((_a = METADATA_DECORATOR_REGEX.exec(script)) !== null && _a !== void 0 ? _a : [])[1];
-    // need to reset regex last index to prevent null result for next execution
-    METADATA_DECORATOR_REGEX.lastIndex = 0;
-    return new Function(`return ${metadataString}`)();
-};
-const extendElementMetadata = (script, extend) => {
-    var _a;
-    const metadataString = ((_a = METADATA_DECORATOR_REGEX.exec(script)) !== null && _a !== void 0 ? _a : [])[1];
-    // need to reset regex last index to prevent null result for next execution
-    METADATA_DECORATOR_REGEX.lastIndex = 0;
-    if (!metadataString) {
-        return script;
-    }
-    const updated = Object.assign(Object.assign({}, new Function(`return ${metadataString}`)()), extend);
-    return script.replace(metadataString, stringifyElementMetadata(updated));
-};
-const getElementConfig = (type) => {
-    return CONFIG[type];
-};
-const doesElementSupportIO = (type) => {
-    var _a, _b;
-    return (_b = (_a = getElementConfig(type).plugins) === null || _a === void 0 ? void 0 : _a.includes(IOPlugin)) !== null && _b !== void 0 ? _b : false;
-};
-function stringifyElementMetadata(elementMetadata) {
-    const cleaned = JSON.stringify(elementMetadata, null, 2);
-    return cleaned.replace(/^[\t ]*"[^:\n\r]+(?<!\\)":/gm, function (match) {
-        return match.replace(/"/g, '');
-    });
-}
-const isValidScript = (script) => {
-    var _a;
-    if (!script) {
-        return false;
-    }
-    const exportedClassName = script && ((_a = EXPORTED_CLASS_REGEX.exec(script)) !== null && _a !== void 0 ? _a : [])[1];
-    if (!exportedClassName) {
-        return false;
-    }
-    const meta = extractElementMetadata(script);
-    if (!meta.name || !meta.type) {
-        return false;
-    }
-    return true;
-};
-function flattenElements(elements) {
-    return flatten(elements.map(el => [el, ...flattenElements(el.children)]));
-}
-function isSharedElement(el) {
-    return Boolean(el.isShared) && el.type !== 'REFERENCE';
-}
-
-class ElementContextService {
-}
-ElementContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ElementContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementContextService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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);
+        else if (modelMeta.path) {
+            this.createFromPath(modelMeta.path);
         }
     }
     createFromPath(path) {
@@ -749,7 +622,7 @@ class ElementRendererComponent {
         this.refs = {};
     }
 }
-ElementRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementRendererComponent, deps: [{ token: i0.Injector, skipSelf: true }, { token: DynamicModuleService }, { token: ElementContextService }, { token: IOProviderService }, { token: i2.ConfigurationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ElementRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementRendererComponent, deps: [{ token: i0.Injector, skipSelf: true }, { token: RuntimeService }, { token: ElementContextService }, { token: IOProviderService }, { token: i2.ConfigurationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ElementRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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.17", ngImport: i0, type: ElementRendererComponent, decorators: [{
             type: Component,
@@ -762,183 +635,696 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.Injector, decorators: [{
                     type: SkipSelf
-                }] }, { type: DynamicModuleService }, { type: ElementContextService }, { type: IOProviderService }, { type: i2.ConfigurationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { el: [{
+                }] }, { type: RuntimeService }, { type: ElementContextService }, { type: IOProviderService }, { type: i2.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;
+class PreviewComponent {
+    constructor(runtimeService, configurationService, messageService, configurationRuntimeService, integrationState, cdr) {
+        this.runtimeService = runtimeService;
+        this.configurationService = configurationService;
+        this.messageService = messageService;
+        this.configurationRuntimeService = configurationRuntimeService;
+        this.integrationState = integrationState;
+        this.cdr = cdr;
+        this.state$ = new BehaviorSubject({ loading: true, failure: false });
+        this.elements = [];
+        this.destroy$ = new Subject();
+        this.runtimeService.updated$.pipe(takeUntil(this.destroy$)).subscribe(() => this.cdr.detectChanges());
+    }
+    ngOnInit() {
+        var _a;
+        if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.suppressClearState)) {
+            this.integrationState.clear();
+        }
+        this.startPreview();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.configurationService.reset();
+        this.runtimeService.clear();
+    }
+    initializeConfiguration$() {
+        const isAlreadyInitialized = this.configurationRuntimeService.isInitialized;
+        if (!this.uiDefinition || this.uiDefinition.type !== 'CONFIGURATION' || isAlreadyInitialized) {
+            return of({});
+        }
+        if (!this.modelId) {
+            console.warn(`No modelId is given for uiDefinition with '${this.uiDefinition.type}' type`);
+            return of({});
+        }
+        // If still not initialized - init configuration in Test mode
+        return this.configurationRuntimeService
+            .initTestMode(this.modelId, this.uiDefinition)
+            .pipe(switchMap(() => this.configurationService.configure()));
+    }
+    startPreview() {
+        if (!this.uiDefinition) {
+            return;
+        }
+        forkJoin([this.runtimeService.initialize$(this.uiDefinition, this.config), this.initializeConfiguration$()])
+            .pipe(tap(([elements]) => {
+            this.elements = elements;
+            this.state$.next({ loading: false, failure: false });
+        }), catchError(error => {
+            var _a, _b;
+            console.error(error);
+            if (!((_b = (_a = this.uiDefinition) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.suppressToastMessages)) {
+                this.messageService.add({ severity: 'error', summary: error });
+            }
+            this.state$.next({ loading: false, failure: true });
+            return of();
+        }), takeUntil(this.destroy$))
+            .subscribe();
     }
 }
-ElementChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementChildrenComponent, deps: [{ token: ElementContextService }], target: i0.ɵɵFactoryTarget.Component });
-ElementChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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.17", ngImport: i0, type: ElementChildrenComponent, decorators: [{
+PreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PreviewComponent, deps: [{ token: RuntimeService }, { token: i2.ConfigurationService }, { token: i3.MessageService }, { token: i2.ConfigurationRuntimeService }, { token: IntegrationState }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PreviewComponent, selector: "vl-cms-preview", inputs: { modelId: "modelId", uiDefinition: "uiDefinition", config: "config" }, providers: [IOProviderService, 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: i5.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i7.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PreviewComponent, 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'],
+                    selector: 'vl-cms-preview',
+                    templateUrl: './preview.component.html',
+                    styleUrls: ['./preview.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: ElementContextService }]; } });
-
+                    providers: [IOProviderService, TemplatesService],
+                    // use shadow DOM to prevent UI from being affected by global styles
+                    encapsulation: ViewEncapsulation.ShadowDom,
+                }]
+        }], ctorParameters: function () { return [{ type: RuntimeService }, { type: i2.ConfigurationService }, { type: i3.MessageService }, { type: i2.ConfigurationRuntimeService }, { type: IntegrationState }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { modelId: [{
+                type: Input
+            }], uiDefinition: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }] } });
+
+class RuntimeEditorService {
+    constructor(runtimeService) {
+        this.runtimeService = runtimeService;
+        this.editorModeSubj$ = new BehaviorSubject(false);
+        this.dragMode$ = new BehaviorSubject(false);
+        this.elementDropped$ = new ReplaySubject();
+        this.elementDeleted$ = new ReplaySubject();
+        this.editorMode$ = this.editorModeSubj$.asObservable();
+        this.runtimeService.isInitialized$.subscribe(() => { var _a; return this.editorModeSubj$.next(Boolean((_a = this.runtimeService.config) === null || _a === void 0 ? void 0 : _a.uiBuilderMode)); });
+    }
+    applyPatch$(patch) {
+        return this.runtimeService.applyPatch$(patch);
+    }
+    toggleEditorMode() {
+        this.editorModeSubj$.next(!this.editorModeSubj$.value);
+    }
+}
+RuntimeEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RuntimeEditorService, deps: [{ token: RuntimeService }], target: i0.ɵɵFactoryTarget.Injectable });
+RuntimeEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RuntimeEditorService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RuntimeEditorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: RuntimeService }]; } });
+
+class ElementDropHandleComponent {
+    constructor(runtimeService) {
+        this.runtimeService = runtimeService;
+    }
+    handleDrop(e) {
+        this.runtimeService.elementDropped$.next({
+            element: e.data,
+            index: this.index,
+            path: this.parentPath,
+        });
+    }
+}
+ElementDropHandleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementDropHandleComponent, deps: [{ token: RuntimeEditorService }], target: i0.ɵɵFactoryTarget.Component });
+ElementDropHandleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementDropHandleComponent, selector: "vl-element-drop-handle", inputs: { index: "index", parentPath: "parentPath" }, ngImport: i0, template: "<div class=\"container\" dndDropzone (dndDrop)=\"handleDrop($event)\">\n  <div class=\"handle\"></div>\n</div>\n", styles: [":host{width:0;position:relative}.container{width:40px;height:100%;position:absolute;transform:translate(-50%);display:flex;justify-content:center;align-items:center}.handle{display:none;background:red;height:calc(100% - 10px);width:2px;pointer-events:none}.container.dndDragover .handle{display:block}\n"], directives: [{ type: i2$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementDropHandleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vl-element-drop-handle',
+                    templateUrl: './element-drop-handle.component.html',
+                    styleUrls: ['./element-drop-handle.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: RuntimeEditorService }]; }, propDecorators: { index: [{
+                type: Input
+            }], parentPath: [{
+                type: Input
+            }] } });
+
+class ElementDropHandleModule {
+}
+ElementDropHandleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementDropHandleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElementDropHandleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementDropHandleModule, declarations: [ElementDropHandleComponent], imports: [CommonModule, DndModule], exports: [ElementDropHandleComponent] });
+ElementDropHandleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementDropHandleModule, imports: [[CommonModule, DndModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementDropHandleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ElementDropHandleComponent],
+                    imports: [CommonModule, DndModule],
+                    exports: [ElementDropHandleComponent],
+                }]
+        }] });
+
+class ElementRendererModule {
+}
+ElementRendererModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElementRendererModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementRendererModule, declarations: [ElementRendererComponent], exports: [ElementRendererComponent] });
+ElementRendererModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementRendererModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementRendererModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ElementRendererComponent],
+                    exports: [ElementRendererComponent],
+                }]
+        }] });
+
+class ElementChildrenComponent {
+    constructor(elementContext, runtimeService, runtimeEditorService, cdr) {
+        var _a, _b;
+        this.elementContext = elementContext;
+        this.runtimeService = runtimeService;
+        this.runtimeEditorService = runtimeEditorService;
+        this.cdr = cdr;
+        this.destroyed$ = new Subject();
+        const path = (_b = (_a = this.elementContext) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.path;
+        this.metadata$ = path ? this.runtimeService.getCompiledElement$(path) : of(undefined);
+        this.dragMode$ = combineLatest([this.runtimeEditorService.editorMode$, this.runtimeEditorService.dragMode$]).pipe(map(flags => flags.every(Boolean)));
+        this.runtimeService.updated$.pipe(takeUntil(this.destroyed$)).subscribe(() => this.cdr.detectChanges());
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
+}
+ElementChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementChildrenComponent, deps: [{ token: ElementContextService }, { token: RuntimeService }, { token: RuntimeEditorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ElementChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementChildrenComponent, selector: "element-children", ngImport: i0, template: "<ng-container *ngIf=\"metadata$ | async as metadata\">\n  <vl-element-drop-handle *ngIf=\"dragMode$ | async\" [index]=\"0\" [parentPath]=\"metadata.path\"></vl-element-drop-handle>\n  <ng-container *ngFor=\"let child of metadata.children; let i = index\">\n    <vl-cms-element-renderer [meta]=\"child\"></vl-cms-element-renderer>\n    <vl-element-drop-handle\n      *ngIf=\"dragMode$ | async\"\n      [index]=\"i + 1\"\n      [parentPath]=\"metadata.path\"\n    ></vl-element-drop-handle>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:contents}\n"], components: [{ type: ElementDropHandleComponent, selector: "vl-element-drop-handle", inputs: ["index", "parentPath"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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 }, { type: RuntimeService }, { type: RuntimeEditorService }, { type: i0.ChangeDetectorRef }]; } });
+
+class ElementChildrenModule {
+}
+ElementChildrenModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementChildrenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElementChildrenModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementChildrenModule, declarations: [ElementChildrenComponent], imports: [LetDirectiveModule, ElementRendererModule, ElementDropHandleModule], exports: [ElementChildrenComponent] });
+ElementChildrenModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementChildrenModule, imports: [[LetDirectiveModule, ElementRendererModule, ElementDropHandleModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementChildrenModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ElementChildrenComponent],
+                    imports: [LetDirectiveModule, ElementRendererModule, ElementDropHandleModule],
+                    exports: [ElementChildrenComponent],
+                }]
+        }] });
+
+class PreviewModule {
+}
+PreviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PreviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PreviewModule, declarations: [PreviewComponent], imports: [CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule, ElementDropHandleModule], exports: [PreviewComponent] });
+PreviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PreviewModule, providers: [IntegrationState], imports: [[CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule, ElementDropHandleModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PreviewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PreviewComponent],
+                    imports: [CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule, ElementDropHandleModule],
+                    providers: [IntegrationState],
+                    exports: [PreviewComponent],
+                }]
+        }] });
+
+function ElementDefinition(definition) {
+    return function (constructor) {
+        return constructor;
+    };
+}
+
 // 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);
+    ngAfterViewInit() {
+        if (!this.customTemplate) {
+            return;
+        }
+        this.templatesService.register(this.customTemplate, this.templateRef);
+    }
+}
+CustomTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: CustomTemplateDirective, selector: "[customTemplate]", inputs: { customTemplate: "customTemplate" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[customTemplate]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: TemplatesService }]; }, propDecorators: { customTemplate: [{
+                type: Input
+            }] } });
+
+class ElementHoverPlugin {
+    constructor(host) {
+        this.host = host;
+        this.hoverClassName = 'element-hover';
+        this.color = 'red';
+        this.highlighted = false;
+        this.destroyed$ = new Subject();
+        this.el = this.host.injector.get(ElementRef);
+        this.metadata = this.host.injector.get(ELEMENT_METADATA);
+        this.document = this.host.injector.get(DOCUMENT);
+        this.runtimeEditorService = this.host.injector.get(RuntimeEditorService);
+        this.mouseOverListenerBound = this.mouseOverListener.bind(this);
+        this.mouseLeaveListenerBound = this.mouseLeaveListener.bind(this);
+        this.runtimeEditorService.editorMode$.pipe(takeUntil(this.destroyed$)).subscribe(editorMode => {
+            if (editorMode) {
+                this.attachListeners();
+            }
+            else {
+                this.detachListeners();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+        this.detachListeners();
+    }
+    attachListeners() {
+        this.el.nativeElement.addEventListener('mouseover', this.mouseOverListenerBound);
+        this.el.nativeElement.addEventListener('mouseleave', this.mouseLeaveListenerBound);
+    }
+    detachListeners() {
+        this.el.nativeElement.removeEventListener('mouseover', this.mouseOverListenerBound);
+        this.el.nativeElement.removeEventListener('mouseleave', this.mouseLeaveListenerBound);
+    }
+    mouseOverListener(e) {
+        const path = e.composedPath();
+        const innerPath = path.slice(0, path.indexOf(this.el.nativeElement));
+        const hasChildHovered = innerPath.some(target => {
+            const t = target;
+            return t.tagName === 'VL-ELEMENT' && t.classList.contains(this.hoverClassName);
+        });
+        if (hasChildHovered) {
+            this.removeHighlight();
+        }
+        else {
+            this.addHighlight();
+        }
+    }
+    mouseLeaveListener() {
+        this.removeHighlight();
+    }
+    addHighlight() {
+        if (this.highlighted) {
+            return;
+        }
+        this.highlighted = true;
+        this.el.nativeElement.classList.add(this.hoverClassName);
+        const overlay = this.createContainer();
+        this.addRemoveButton(overlay);
+        this.addElementName(overlay);
+        this.el.nativeElement.appendChild(overlay);
+        this.overlayEl = overlay;
+    }
+    removeHighlight() {
+        if (!this.highlighted) {
+            return;
+        }
+        this.highlighted = false;
+        this.el.nativeElement.style.boxShadow = '';
+        this.el.nativeElement.classList.remove(this.hoverClassName);
+        this.deleteRemoveButton();
+    }
+    createContainer() {
+        const hostRect = this.el.nativeElement.getBoundingClientRect();
+        const div = this.document.createElement('div');
+        merge(div.style, {
+            position: 'fixed',
+            display: 'block',
+            pointerEvents: 'none',
+            left: '0',
+            top: '0',
+            fontSize: '10px',
+            lineHeight: `12px`,
+            fontWeight: '400',
+            color: '#fff',
+            width: `${hostRect.width}px`,
+            height: `${hostRect.height}px`,
+            transform: `translate(${hostRect.left}px, ${hostRect.top}px)`,
+            boxSizing: 'border-box',
+            boxShadow: `inset 0 0 0 1px ${this.color}`,
+        });
+        return div;
+    }
+    addRemoveButton(container) {
+        if (this.metadata.type === 'LAYOUT_REGION') {
+            return;
+        }
+        const buttonEl = this.document.createElement('div');
+        const buttonSize = 12;
+        merge(buttonEl.style, {
+            bottom: '100%',
+            right: '0',
+            width: `${buttonSize}px`,
+            height: `${buttonSize}px`,
+            padding: '1px',
+            textAlign: 'center',
+            backgroundColor: this.color,
+            position: 'absolute',
+            cursor: 'pointer',
+            display: 'block',
+            pointerEvents: 'all',
+        });
+        buttonEl.innerHTML = '&#10005;';
+        buttonEl.addEventListener('click', () => {
+            if (this.metadata.path) {
+                this.runtimeEditorService.elementDeleted$.next({ path: this.metadata.path });
+            }
+        });
+        container.appendChild(buttonEl);
+    }
+    addElementName(container) {
+        const nameEl = this.document.createElement('div');
+        merge(nameEl.style, {
+            bottom: '100%',
+            left: '0',
+            height: `12px`,
+            backgroundColor: this.color,
+            position: 'absolute',
+            padding: '1px 2px',
+            display: 'block',
+            pointerEvents: 'all',
+        });
+        nameEl.innerHTML = this.metadata.name;
+        container.appendChild(nameEl);
+    }
+    deleteRemoveButton() {
+        if (this.overlayEl) {
+            this.el.nativeElement.removeChild(this.overlayEl);
+            this.overlayEl = undefined;
+        }
+    }
+}
+ElementHoverPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHoverPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
+ElementHoverPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ElementHoverPlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHoverPlugin, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
+
+class IOPlugin {
+    constructor(host) {
+        var _a, _b;
+        this.host = host;
+        const elementMetadata = this.host.injector.get(ELEMENT_METADATA);
+        const inputProvider = this.host.injector.get(IOProviderService);
+        const inputs = Object.entries((_a = elementMetadata.inputs) !== null && _a !== void 0 ? _a : {});
+        const outputs = Object.entries((_b = elementMetadata.outputs) !== null && _b !== void 0 ? _b : {});
+        inputs.forEach(([key, path]) => {
+            var _a;
+            if (path && typeof path !== 'string') {
+                console.error(`The value of '${key}' input should be a string`);
+            }
+            if (((_a = elementMetadata.outputs) === null || _a === void 0 ? void 0 : _a[key]) !== undefined) {
+                console.warn(`'${key}' appears both in inputs and outputs. To prevent inconsistent behavior please keep them unique `);
+            }
+            this.host[key] = inputProvider.connect(elementMetadata, key, path);
+        });
+        outputs.forEach(([key, path]) => {
+            if (path && typeof path !== 'string') {
+                console.error(`The value of '${key}' output should be a string`);
+            }
+            this.host[key] = inputProvider.provide(elementMetadata, key, path);
+        });
+    }
+}
+IOPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IOPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
+IOPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: IOPlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IOPlugin, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
+
+class ScriptPlugin {
+    constructor(host) {
+        this.host = host;
+        this.normalizeImports = (script, elementPath) => {
+            const regexp = new RegExp(`import([ \\n\\t]*(?:[^ \\n\\t\\{\\}]+[ \\n\\t]*,?)?(?:[ \\n\\t]*\\{(?:[ \\n\\t]*[^ \\n\\t"'\\{\\}]+[ \\n\\t]*,?)+\\})?[ \\n\\t]*)from[ \\n\\t]*(['"])([^'"\\n]+)(?:['"]);`, 'g');
+            const result = script.replace(regexp, (match, g1, g2, src) => {
+                const imports = g1
+                    .trim()
+                    .slice(1, -1)
+                    .split(',')
+                    .map(item => item.trim());
+                imports.forEach(item => {
+                    var _a;
+                    if (!((_a = this.vendorMap[src]) === null || _a === void 0 ? void 0 : _a[item])) {
+                        throw new Error(`Failed to import ${item} from '${src}' in ${elementPath}/script.ts`);
+                    }
+                });
+                return `const ${g1} = vendor['${src}'];`;
+            });
+            return result;
+        };
+        this.document = this.host.injector.get(DOCUMENT);
+        this.vendorMap = this.host.injector.get(VENDOR_MAP);
+        const elementMetadata = this.host.injector.get(ELEMENT_METADATA);
+        const sharedElementMetadata = this.host.injector.get(SHARED_ELEMENT_METADATA);
+        this.addScript(sharedElementMetadata);
+        this.addScript(elementMetadata);
+    }
+    addScript(metadata) {
+        var _a;
+        if (!(metadata === null || metadata === void 0 ? void 0 : metadata.script)) {
+            return;
+        }
+        const id = btoa(UUID.UUID());
+        const script = this.document.createElement('script');
+        script.type = `text/javascript`;
+        let scriptContent = this.normalizeImports(metadata.script, (_a = metadata.path) !== null && _a !== void 0 ? _a : metadata.name);
+        const classMatch = /export class (\S+)/.exec(scriptContent);
+        const className = classMatch === null || classMatch === void 0 ? void 0 : classMatch[1];
+        if (!classMatch || !className) {
+            console.error("Script doesn't have exported class");
+            return;
+        }
+        scriptContent = scriptContent.replace(classMatch[0], `class ${className}`);
+        script.text = `var ${id} = function(vendor) {${scriptContent}
+        return ${className}; };`;
+        this.document.body.appendChild(script);
+        const ScriptClass = window[id](this.vendorMap);
+        if (ScriptClass instanceof Object) {
+            this.host.registerPlugin(new ScriptClass(this.host));
+        }
+        this.document.body.removeChild(script);
+    }
+}
+ScriptPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ScriptPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
+ScriptPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ScriptPlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ScriptPlugin, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
+
+/*
+ * ScriptPlugin must always be the last plugin in the list to make sure user code is running after all pre-initializers.
+ */
+const CONFIG = {
+    CUSTOM: {
+        component: ElementComponent,
+        plugins: [ElementHoverPlugin, IOPlugin, ScriptPlugin],
+    },
+    CONTAINER: {
+        component: ElementComponent,
+        defaultTemplate: '<element-children></element-children>',
+        plugins: [ElementHoverPlugin, ScriptPlugin],
+    },
+    SERVICE: {
+        component: ElementComponent,
+        plugins: [IOPlugin, ScriptPlugin],
+        suppressTemplate: true,
+        suppressStyles: true,
+    },
+    REFERENCE: {
+        component: ElementComponent,
+        plugins: [ElementHoverPlugin, IOPlugin, ScriptPlugin],
+        suppressTemplate: true,
+    },
+    PAGE: {
+        component: ElementComponent,
+        plugins: [ElementHoverPlugin, IOPlugin, ScriptPlugin],
+    },
+    PAGE_LAYOUT: {
+        component: ElementComponent,
+        plugins: [ElementHoverPlugin, IOPlugin, ScriptPlugin],
+    },
+    LAYOUT_REGION: {
+        component: ElementComponent,
+        plugins: [ElementHoverPlugin, IOPlugin, ScriptPlugin],
+    },
+};
+
+const EXPORTED_CLASS_REGEX = /export class (\S+)/;
+const METADATA_DECORATOR_REGEX = /@ElementDefinition\(([\s\S]+)\)(\n|\r\n|.)*export class/g;
+class UiBuildError extends Error {
+    constructor(message, affectedMetadata) {
+        super(message);
+        this.name = this.constructor.name;
+        this.affectedMetadata = affectedMetadata;
+    }
+}
+const elementToMetadata = (el, parentPath) => {
+    var _a;
+    const script = el.script && window.atob(el.script);
+    const template = el.template && window.atob(el.template);
+    const styles = el.styles && window.atob(el.styles);
+    const exportedClassName = script && ((_a = EXPORTED_CLASS_REGEX.exec(script)) !== null && _a !== void 0 ? _a : [])[1];
+    if (!exportedClassName) {
+        throw new Error("Script doesn't have exported class");
+    }
+    const elementMetadata = extractElementMetadata(script || '');
+    const path = (parentPath ? parentPath + '/' : '') + elementMetadata.name;
+    return Object.assign(Object.assign({}, elementMetadata), { path, script: script === null || script === void 0 ? void 0 : script.replace(METADATA_DECORATOR_REGEX, 'export class'), template,
+        styles, children: el.children.map(child => elementToMetadata(child, path)) });
+};
+const metadataToElement = (metadata, recursive = true) => {
+    const elMetadata = {
+        name: metadata.name,
+        isShared: metadata.isShared,
+        type: metadata.type,
+        model: metadata.model,
+        module: metadata.module,
+        reference: metadata.reference,
+        inputs: metadata.inputs,
+        outputs: metadata.outputs,
+        children: metadata.children.map(({ name }) => name),
+        configuredStyles: metadata.configuredStyles,
+    };
+    const normalizedElMetadata = normalizeElementMetadata(elMetadata);
+    if (!metadata.script || !EXPORTED_CLASS_REGEX.test(metadata.script)) {
+        throw new UiBuildError(`'${metadata.name}' component script is missing an exported class`, metadata);
+    }
+    const script = metadata.script &&
+        window.btoa(metadata.script.replace(EXPORTED_CLASS_REGEX, `@ElementDefinition(${stringifyElementMetadata(normalizedElMetadata)})\nexport class Script`));
+    const template = metadata.template && window.btoa(metadata.template);
+    const styles = metadata.styles && window.btoa(metadata.styles);
+    return {
+        script,
+        template,
+        styles,
+        children: recursive ? metadata.children.map(meta => metadataToElement(meta)) : [],
+    };
+};
+const normalizeElementMetadata = (elementMetadata) => {
+    var _a, _b, _c, _d;
+    const metadata = Object.assign({}, elementMetadata);
+    // model
+    const { lineItem, path } = (_a = metadata.model) !== null && _a !== void 0 ? _a : {};
+    const model = lineItem ? { lineItem } : path ? { path } : undefined;
+    if (model) {
+        metadata.model = model;
     }
-}
-CustomTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: CustomTemplateDirective, selector: "[customTemplate]", inputs: { customTemplate: "customTemplate" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[customTemplate]' }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: TemplatesService }]; }, propDecorators: { customTemplate: [{
-                type: Input
-            }] } });
-
-const defaultOptions = {
-    suppressLoading: false,
-    loadingLabel: 'LOADING',
+    else {
+        delete metadata.model;
+    }
+    // module
+    if (!metadata.module) {
+        delete metadata.module;
+    }
+    // reference
+    if (!metadata.reference) {
+        delete metadata.reference;
+    }
+    // inputs
+    const inputs = Object.entries((_b = metadata.inputs) !== null && _b !== void 0 ? _b : {}).reduce((acc, [key, value]) => {
+        return Object.assign(Object.assign({}, acc), { [key]: value || null });
+    }, {});
+    if (inputs && Object.keys(inputs).length > 0) {
+        metadata.inputs = inputs;
+    }
+    else {
+        delete metadata.inputs;
+    }
+    // outputs
+    const outputs = Object.entries((_c = metadata.outputs) !== null && _c !== void 0 ? _c : {}).reduce((acc, [key, value]) => {
+        return Object.assign(Object.assign({}, acc), { [key]: value || null });
+    }, {});
+    if (outputs && Object.keys(outputs).length > 0) {
+        metadata.outputs = outputs;
+    }
+    else {
+        delete metadata.outputs;
+    }
+    // children
+    if (!((_d = metadata.children) === null || _d === void 0 ? void 0 : _d.length)) {
+        delete metadata.children;
+    }
+    // isShared
+    if (!metadata.isShared) {
+        delete metadata.isShared;
+    }
+    // configuredStyles
+    if (!metadata.configuredStyles) {
+        delete metadata.configuredStyles;
+    }
+    return metadata;
 };
-
-const moduleMap = {};
-function loadRemoteEntry(remoteEntry) {
-    return new Promise((resolve, reject) => {
-        if (moduleMap[remoteEntry]) {
-            resolve();
-            return;
-        }
-        const script = document.createElement('script');
-        script.src = remoteEntry;
-        script.onerror = reject;
-        script.onload = () => {
-            moduleMap[remoteEntry] = true;
-            resolve(); // window is the global namespace
-        };
-        document.body.append(script);
-    });
-}
-function lookupExposedModule(remoteName, exposedModule) {
-    return __awaiter(this, void 0, void 0, function* () {
-        // Initializes the share scope. This fills it with known provided modules from this build and all remotes
-        yield __webpack_init_sharing__('default');
-        const container = window[remoteName]; // or get the container somewhere else
-        // Initialize the container, it may provide shared modules
-        yield container.init(__webpack_share_scopes__.default);
-        const factory = yield container.get(exposedModule);
-        const Module = factory();
-        return Module;
-    });
-}
-function loadRemoteModule(remoteEntry, remoteName, exposedModule) {
-    return __awaiter(this, void 0, void 0, function* () {
-        yield loadRemoteEntry(remoteEntry);
-        return yield lookupExposedModule(remoteName, exposedModule);
+const extractElementMetadata = (script) => {
+    var _a;
+    const metadataString = ((_a = METADATA_DECORATOR_REGEX.exec(script)) !== null && _a !== void 0 ? _a : [])[1];
+    // need to reset regex last index to prevent null result for next execution
+    METADATA_DECORATOR_REGEX.lastIndex = 0;
+    return new Function(`return ${metadataString}`)();
+};
+const extendElementMetadata = (script, extend) => {
+    var _a;
+    const metadataString = ((_a = METADATA_DECORATOR_REGEX.exec(script)) !== null && _a !== void 0 ? _a : [])[1];
+    // need to reset regex last index to prevent null result for next execution
+    METADATA_DECORATOR_REGEX.lastIndex = 0;
+    if (!metadataString) {
+        return script;
+    }
+    const updated = Object.assign(Object.assign({}, new Function(`return ${metadataString}`)()), extend);
+    return script.replace(metadataString, stringifyElementMetadata(updated));
+};
+const getElementConfig = (type) => {
+    return CONFIG[type];
+};
+const doesElementSupportIO = (type) => {
+    var _a, _b;
+    return (_b = (_a = getElementConfig(type).plugins) === null || _a === void 0 ? void 0 : _a.includes(IOPlugin)) !== null && _b !== void 0 ? _b : false;
+};
+function stringifyElementMetadata(elementMetadata) {
+    const cleaned = JSON.stringify(elementMetadata, null, 2);
+    return cleaned.replace(/^[\t ]*"[^:\n\r]+(?<!\\)":/gm, function (match) {
+        return match.replace(/"/g, '');
     });
 }
-
-class FederatedComponent {
-    constructor(injector, compiler, appRef, renderer) {
-        this.injector = injector;
-        this.compiler = compiler;
-        this.appRef = appRef;
-        this.renderer = renderer;
-        this.isLoading$ = new BehaviorSubject(false);
-        // configs
-        this.suppressLoading = defaultOptions.suppressLoading;
-        this.loadingLabel = defaultOptions.loadingLabel;
-    }
-    ngOnChanges(changes) {
-        var _a, _b, _c, _d;
-        if (changes.data && this.instance) {
-            this.instance.data = this.data;
-        }
-        if (changes.options) {
-            this.suppressLoading = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.suppressLoading) !== null && _b !== void 0 ? _b : defaultOptions.suppressLoading;
-            this.loadingLabel = (_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.loadingLabel) !== null && _d !== void 0 ? _d : defaultOptions.loadingLabel;
-        }
+const isValidScript = (script) => {
+    var _a;
+    if (!script) {
+        return false;
     }
-    ngOnInit() {
-        this.isLoading$.next(true);
+    const exportedClassName = script && ((_a = EXPORTED_CLASS_REGEX.exec(script)) !== null && _a !== void 0 ? _a : [])[1];
+    if (!exportedClassName) {
+        return false;
     }
-    ngAfterViewInit() {
-        var _a, _b, _c, _d, _e, _f;
-        const remoteEntry = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.remoteEntry) !== null && _b !== void 0 ? _b : this.remoteEntry;
-        const remoteName = (_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.remoteName) !== null && _d !== void 0 ? _d : this.remoteName;
-        const exposedModule = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.exposedModule) !== null && _f !== void 0 ? _f : this.exposedModule;
-        if (!remoteEntry || !remoteName || !exposedModule) {
-            return;
-        }
-        loadRemoteModule(remoteEntry, remoteName, exposedModule).then(federated => {
-            this.compiler.compileModuleAsync(federated[exposedModule]).then(moduleFactory => {
-                var _a, _b, _c;
-                const rootModuleRef = moduleFactory.create(this.injector);
-                const rootComponentFactory = rootModuleRef.componentFactoryResolver.resolveComponentFactory(federated[exposedModule].rootComponent);
-                const node = document.createElement('div');
-                const { instance, hostView } = rootComponentFactory.create(this.injector, [], node);
-                this.instance = instance;
-                this.instance.data = this.data;
-                this.renderer.appendChild((_a = this.moduleHostRef) === null || _a === void 0 ? void 0 : _a.nativeElement, node);
-                this.appRef.attachView(hostView);
-                (_c = (_b = this.options) === null || _b === void 0 ? void 0 : _b.onReady) === null || _c === void 0 ? void 0 : _c.call(_b);
-                this.isLoading$.next(false);
-            });
-        });
+    const meta = extractElementMetadata(script);
+    if (!meta.name || !meta.type) {
+        return false;
     }
+    return true;
+};
+function flattenElements(elements) {
+    return flatten(elements.map(el => [el, ...flattenElements(el.children)]));
 }
-FederatedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FederatedComponent, deps: [{ token: i0.Injector }, { token: i0.Compiler }, { token: i0.ApplicationRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-FederatedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FederatedComponent, selector: "veloce-host-federated", inputs: { remoteEntry: "remoteEntry", remoteName: "remoteName", exposedModule: "exposedModule", data: "data", options: "options" }, viewQueries: [{ propertyName: "moduleHostRef", first: true, predicate: ["moduleHost"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #moduleHost></div>\n\n<vl-loader *ngIf=\"!suppressLoading && (isLoading$ | async)\" [label]=\"loadingLabel\"></vl-loader>\n", styles: [":host{display:block}div{height:100%}\n"], components: [{ type: i1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i7.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FederatedComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: 'veloce-host-federated',
-                    templateUrl: './federated.component.html',
-                    styleUrls: ['./federated.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.Compiler }, { type: i0.ApplicationRef }, { type: i0.Renderer2 }]; }, propDecorators: { moduleHostRef: [{
-                type: ViewChild,
-                args: ['moduleHost', { static: false }]
-            }], remoteEntry: [{
-                type: Input
-            }], remoteName: [{
-                type: Input
-            }], exposedModule: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }] } });
-
-class FederatedModule {
+function isSharedElement(el) {
+    return Boolean(el.isShared) && el.type !== 'REFERENCE';
 }
-FederatedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FederatedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FederatedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FederatedModule, declarations: [FederatedComponent], imports: [CommonModule, LoaderModule], exports: [FederatedComponent] });
-FederatedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FederatedModule, imports: [[CommonModule, LoaderModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FederatedModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [FederatedComponent],
-                    imports: [CommonModule, LoaderModule],
-                    exports: [FederatedComponent],
-                }]
-        }] });
 
 class ConfigurationPlugin {
     constructor(host) {
@@ -979,9 +1365,17 @@ class ConfigurationPlugin {
             if (!rootLineItem || !this.modelSnapshot) {
                 return;
             }
-            this.configurationService.patch(new LineItemWorker(rootLineItem).remove(this.modelSnapshot.id).li);
+            this.configurationService.patch(new LineItemWorker(rootLineItem).remove(this.modelSnapshot.id).li);
+        };
+        const updateQty = (qty) => {
+            const rootLineItem = this.configurationService.getSnapshot();
+            if (!rootLineItem || !this.modelSnapshot) {
+                return;
+            }
+            this.configurationService.patch(new LineItemWorker(rootLineItem).replace(Object.assign(Object.assign({}, this.modelSnapshot), { qty })).li);
         };
         this.typeHost.remove = remove;
+        this.typeHost.updateQty = updateQty;
     }
     registerPort(name) {
         const model$ = this.host.model$;
@@ -1037,43 +1431,6 @@ const DEFAULT_PLUGINS = {
     DEFAULT: [],
 };
 
-const InitAction = { type: 'INIT' };
-const ClearAction = { type: 'CLEAR' };
-class IntegrationState {
-    constructor() {
-        this.stateSubj$ = new BehaviorSubject({});
-        this.action$ = new BehaviorSubject(InitAction);
-    }
-    get state$() {
-        return this.stateSubj$.asObservable();
-    }
-    get state() {
-        return this.stateSubj$.getValue();
-    }
-    patchState(update) {
-        this.stateSubj$.next(Object.assign(Object.assign({}, this.stateSubj$.getValue()), update));
-    }
-    dispatch(action) {
-        this.action$.next(action);
-    }
-    listen$(actionType) {
-        return this.action$.pipe(filter(action => action.type === actionType), map(action => action.payload));
-    }
-    listenAll$() {
-        return this.action$.asObservable();
-    }
-    clear() {
-        this.stateSubj$.next({});
-        this.action$.next(ClearAction);
-    }
-}
-IntegrationState.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IntegrationState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-IntegrationState.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IntegrationState, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IntegrationState, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 const VELOCE_LIBS = {
     '@veloceapps/sdk/core': Object.assign({ ConfigurationService,
         QuoteDraftService,
@@ -1110,11 +1467,19 @@ class ElementsResolver {
         this.sharedElements = [];
         const transpiledElements = this.transpileScripts(elements);
         this.sharedElements = this.flattenElements(transpiledElements).filter(el => this.isSharedElement(el));
-        this.elements = transpiledElements.map(el => this.processElementMetadata(el)).filter(Boolean);
+        this.elements = transpiledElements.map(el => this.processElementMetadata(el)).filter(isDefined);
+        this.renderableElements = this.getRenderableElements(this.elements);
+    }
+    addElement(element) {
+        if (element.isShared) {
+            return;
+        }
+        const transpiledElements = this.transpileScripts([element]);
+        this.elements = transpiledElements.map(el => this.processElementMetadata(el)).filter(isDefined);
         this.renderableElements = this.getRenderableElements(this.elements);
     }
     getNgComponents() {
-        return this.renderableElements.map(el => this.resolveElement(el)).filter(Boolean);
+        return this.renderableElements.map(el => this.resolveElement(el)).filter(isDefined);
     }
     transpile(el) {
         var _a;
@@ -1181,9 +1546,7 @@ class ElementsResolver {
         }
         finalElement.template = this.resolveElementTemplate(finalElement);
         finalElement.styles = this.resolveElementStyles(finalElement);
-        return Object.assign(Object.assign({}, finalElement), { children: finalElement.children
-                .map(child => this.processElementMetadata(child))
-                .filter(Boolean) });
+        return Object.assign(Object.assign({}, finalElement), { children: finalElement.children.map(child => this.processElementMetadata(child)).filter(isDefined) });
     }
     getSharedChildren(children, parentPath) {
         return children.map(c => {
@@ -1243,202 +1606,235 @@ class ElementsResolver {
     }
 }
 
-class LauncherService {
-    constructor(compiler, dynamicModuleService) {
-        this.compiler = compiler;
-        this.dynamicModuleService = dynamicModuleService;
-    }
-    compileModule(uiDef, elements) {
-        const elementsResolver = new ElementsResolver(uiDef, elements);
-        this.dynamicModuleService.elementsTree = elementsResolver.elements;
-        this.module = this.getModule(elementsResolver.getNgComponents());
-        return from(this.compiler.compileModuleAndAllComponentsAsync(this.module)).pipe(tap(m => {
-            this.dynamicModuleService.componentFactories = m.componentFactories;
-            this.moduleInstance = m;
-        }), map(m => ({ module: m, elements: elementsResolver.elements })));
-    }
-    destroy() {
-        if (this.moduleInstance) {
-            this.dynamicModuleService.clear();
-            this.moduleInstance = undefined;
-        }
-        if (this.module) {
-            this.compiler.clearCacheFor(this.module);
-            this.module = undefined;
+const defaultOptions = {
+    suppressLoading: false,
+    loadingLabel: 'LOADING',
+};
+
+const moduleMap = {};
+function loadRemoteEntry(remoteEntry) {
+    return new Promise((resolve, reject) => {
+        if (moduleMap[remoteEntry]) {
+            resolve();
+            return;
         }
-    }
-    getModule(components) {
-        const staticComponents = [ElementChildrenComponent, ElementRendererComponent, CustomTemplateDirective];
-        let DynamicModule = class DynamicModule {
+        const script = document.createElement('script');
+        script.src = remoteEntry;
+        script.onerror = reject;
+        script.onload = () => {
+            moduleMap[remoteEntry] = true;
+            resolve(); // window is the global namespace
         };
-        DynamicModule = __decorate([
-            NgModule({
-                imports: [CommonModule, FormsModule, ReactiveFormsModule, FederatedModule, DragDropModule, ScrollingModule],
-                declarations: [...staticComponents, ...components],
-                jit: true,
-            })
-        ], DynamicModule);
-        return DynamicModule;
-    }
+        document.body.append(script);
+    });
+}
+function lookupExposedModule(remoteName, exposedModule) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // Initializes the share scope. This fills it with known provided modules from this build and all remotes
+        yield __webpack_init_sharing__('default');
+        const container = window[remoteName]; // or get the container somewhere else
+        // Initialize the container, it may provide shared modules
+        yield container.init(__webpack_share_scopes__.default);
+        const factory = yield container.get(exposedModule);
+        const Module = factory();
+        return Module;
+    });
+}
+function loadRemoteModule(remoteEntry, remoteName, exposedModule) {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield loadRemoteEntry(remoteEntry);
+        return yield lookupExposedModule(remoteName, exposedModule);
+    });
 }
-LauncherService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", ngImport: i0, type: LauncherService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LauncherService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Compiler }, { type: DynamicModuleService }]; } });
 
-class PreviewComponent {
-    constructor(launcherService, configurationService, messageService, runtimeService, integrationState) {
-        this.launcherService = launcherService;
-        this.configurationService = configurationService;
-        this.messageService = messageService;
-        this.runtimeService = runtimeService;
-        this.integrationState = integrationState;
-        this.clearState = false;
-        this.state$ = new BehaviorSubject({ loading: true, failure: false });
-        this.elements = [];
-        this.destroy$ = new Subject();
-    }
-    ngOnInit() {
-        if (this.clearState) {
-            this.integrationState.clear();
-        }
-        this.startPreview();
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.configurationService.reset();
+class FederatedComponent {
+    constructor(injector, compiler, appRef, renderer) {
+        this.injector = injector;
+        this.compiler = compiler;
+        this.appRef = appRef;
+        this.renderer = renderer;
+        this.isLoading$ = new BehaviorSubject(false);
+        // configs
+        this.suppressLoading = defaultOptions.suppressLoading;
+        this.loadingLabel = defaultOptions.loadingLabel;
     }
-    initializeConfiguration$() {
-        const isAlreadyInitialized = this.runtimeService.isInitialized;
-        if (!this.uiDefinition || this.uiDefinition.type !== 'CONFIGURATION' || isAlreadyInitialized) {
-            return of({});
+    ngOnChanges(changes) {
+        var _a, _b, _c, _d;
+        if (changes.data && this.instance) {
+            this.instance.data = this.data;
         }
-        if (!this.modelId) {
-            console.warn(`No modelId is given for uiDefinition with '${this.uiDefinition.type}' type`);
-            return of({});
+        if (changes.options) {
+            this.suppressLoading = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.suppressLoading) !== null && _b !== void 0 ? _b : defaultOptions.suppressLoading;
+            this.loadingLabel = (_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.loadingLabel) !== null && _d !== void 0 ? _d : defaultOptions.loadingLabel;
         }
-        // If still not initialized - init configuration in Test mode
-        return this.runtimeService
-            .initTestMode(this.modelId, this.uiDefinition)
-            .pipe(switchMap(() => this.configurationService.configure()));
     }
-    elementToMetadataSafe(elements) {
-        var _a, _b;
-        try {
-            return elements.map(element => elementToMetadata(element));
-        }
-        catch (e) {
-            console.error(e);
-            if (!((_b = (_a = this.uiDefinition) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.suppressToastMessages)) {
-                this.messageService.add({ severity: 'error', summary: String(e) });
-            }
-            return [];
-        }
+    ngOnInit() {
+        this.isLoading$.next(true);
     }
-    startPreview() {
-        if (!this.uiDefinition) {
+    ngAfterViewInit() {
+        var _a, _b, _c, _d, _e, _f;
+        const remoteEntry = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.remoteEntry) !== null && _b !== void 0 ? _b : this.remoteEntry;
+        const remoteName = (_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.remoteName) !== null && _d !== void 0 ? _d : this.remoteName;
+        const exposedModule = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.exposedModule) !== null && _f !== void 0 ? _f : this.exposedModule;
+        if (!remoteEntry || !remoteName || !exposedModule) {
             return;
         }
-        const _a = this.uiDefinition, { children } = _a, uiDefinitionMeta = __rest(_a, ["children"]);
-        const elements = this.elementToMetadataSafe(children);
-        const compilation$ = this.launcherService.compileModule(uiDefinitionMeta, elements);
-        forkJoin([compilation$, this.initializeConfiguration$()])
-            .pipe(tap(([result]) => {
-            this.elements = result.elements;
-            this.state$.next({ loading: false, failure: false });
-        }), catchError(error => {
-            var _a, _b;
-            console.error(error);
-            if (!((_b = (_a = this.uiDefinition) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.suppressToastMessages)) {
-                this.messageService.add({ severity: 'error', summary: error });
-            }
-            this.state$.next({ loading: false, failure: true });
-            return of();
-        }), takeUntil(this.destroy$))
-            .subscribe();
+        loadRemoteModule(remoteEntry, remoteName, exposedModule).then(federated => {
+            this.compiler.compileModuleAsync(federated[exposedModule]).then(moduleFactory => {
+                var _a, _b, _c;
+                const rootModuleRef = moduleFactory.create(this.injector);
+                const rootComponentFactory = rootModuleRef.componentFactoryResolver.resolveComponentFactory(federated[exposedModule].rootComponent);
+                const node = document.createElement('div');
+                const { instance, hostView } = rootComponentFactory.create(this.injector, [], node);
+                this.instance = instance;
+                this.instance.data = this.data;
+                this.renderer.appendChild((_a = this.moduleHostRef) === null || _a === void 0 ? void 0 : _a.nativeElement, node);
+                this.appRef.attachView(hostView);
+                (_c = (_b = this.options) === null || _b === void 0 ? void 0 : _b.onReady) === null || _c === void 0 ? void 0 : _c.call(_b);
+                this.isLoading$.next(false);
+            });
+        });
     }
 }
-PreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PreviewComponent, deps: [{ token: LauncherService }, { token: i2.ConfigurationService }, { token: i3.MessageService }, { token: i2.ConfigurationRuntimeService }, { token: IntegrationState }], target: i0.ɵɵFactoryTarget.Component });
-PreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PreviewComponent, selector: "vl-cms-preview", inputs: { modelId: "modelId", uiDefinition: "uiDefinition", clearState: "clearState" }, providers: [IOProviderService, 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: i1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i7.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PreviewComponent, decorators: [{
+FederatedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FederatedComponent, deps: [{ token: i0.Injector }, { token: i0.Compiler }, { token: i0.ApplicationRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FederatedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FederatedComponent, selector: "veloce-host-federated", inputs: { remoteEntry: "remoteEntry", remoteName: "remoteName", exposedModule: "exposedModule", data: "data", options: "options" }, viewQueries: [{ propertyName: "moduleHostRef", first: true, predicate: ["moduleHost"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #moduleHost></div>\n\n<vl-loader *ngIf=\"!suppressLoading && (isLoading$ | async)\" [label]=\"loadingLabel\"></vl-loader>\n", styles: [":host{display:block}div{height:100%}\n"], components: [{ type: i5.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i7.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FederatedComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'vl-cms-preview',
-                    templateUrl: './preview.component.html',
-                    styleUrls: ['./preview.component.scss'],
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'veloce-host-federated',
+                    templateUrl: './federated.component.html',
+                    styleUrls: ['./federated.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [IOProviderService, TemplatesService],
-                    // use shadow DOM to prevent UI from being affected by global styles
-                    encapsulation: ViewEncapsulation.ShadowDom,
                 }]
-        }], ctorParameters: function () { return [{ type: LauncherService }, { type: i2.ConfigurationService }, { type: i3.MessageService }, { type: i2.ConfigurationRuntimeService }, { type: IntegrationState }]; }, propDecorators: { modelId: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.Compiler }, { type: i0.ApplicationRef }, { type: i0.Renderer2 }]; }, propDecorators: { moduleHostRef: [{
+                type: ViewChild,
+                args: ['moduleHost', { static: false }]
+            }], remoteEntry: [{
                 type: Input
-            }], uiDefinition: [{
+            }], remoteName: [{
+                type: Input
+            }], exposedModule: [{
+                type: Input
+            }], data: [{
                 type: Input
-            }], clearState: [{
+            }], options: [{
                 type: Input
             }] } });
 
-class ElementRendererModule {
+class FederatedModule {
 }
-ElementRendererModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElementRendererModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementRendererModule, declarations: [ElementRendererComponent], exports: [ElementRendererComponent] });
-ElementRendererModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementRendererModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementRendererModule, decorators: [{
+FederatedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FederatedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FederatedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FederatedModule, declarations: [FederatedComponent], imports: [CommonModule, LoaderModule], exports: [FederatedComponent] });
+FederatedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FederatedModule, imports: [[CommonModule, LoaderModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FederatedModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ElementRendererComponent],
-                    exports: [ElementRendererComponent],
+                    declarations: [FederatedComponent],
+                    imports: [CommonModule, LoaderModule],
+                    exports: [FederatedComponent],
                 }]
         }] });
 
-class ElementChildrenModule {
+class CompilationService {
+    constructor(compiler) {
+        this.compiler = compiler;
+    }
+    compileUIDefinition$(uiDefinition) {
+        this.uiDefinitionMeta = omit(uiDefinition, 'children');
+        return of([]).pipe(switchMap(() => {
+            const metadata = uiDefinition.children.map(element => elementToMetadata(element));
+            this.elementsResolver = new ElementsResolver(uiDefinition, metadata);
+            const module = this.getModule(this.elementsResolver.getNgComponents());
+            return combineLatest([
+                from(this.compiler.compileModuleAndAllComponentsAsync(module)),
+                of(this.elementsResolver),
+            ]);
+        }), map(([module, elementsResolver]) => ({ module, elements: elementsResolver.elements })));
+    }
+    compileElement$(element) {
+        if (!this.uiDefinitionMeta) {
+            throw 'No UI Definition context';
+        }
+        return of(this.uiDefinitionMeta).pipe(switchMap(uiDefinition => {
+            var _a;
+            const elementsResolver = (_a = this.elementsResolver) !== null && _a !== void 0 ? _a : new ElementsResolver(uiDefinition, []);
+            elementsResolver.addElement(element);
+            const module = this.getModule(elementsResolver.getNgComponents());
+            return combineLatest([from(this.compiler.compileModuleAndAllComponentsAsync(module)), of(elementsResolver)]);
+        }), map(([module, elementsResolver]) => ({ module, elements: elementsResolver.elements })));
+    }
+    clearModuleCache(modules) {
+        modules.forEach(module => this.compiler.clearCacheFor(module));
+        this.uiDefinitionMeta = undefined;
+    }
+    getModule(components) {
+        const staticComponents = [
+            ElementChildrenComponent,
+            ElementRendererComponent,
+            ElementDropHandleComponent,
+            CustomTemplateDirective,
+        ];
+        let DynamicModule = class DynamicModule {
+        };
+        DynamicModule = __decorate([
+            NgModule({
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    FederatedModule,
+                    DragDropModule,
+                    DndModule,
+                    ScrollingModule,
+                ],
+                declarations: [...staticComponents, ...components],
+                jit: true,
+            })
+        ], DynamicModule);
+        return DynamicModule;
+    }
 }
-ElementChildrenModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementChildrenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElementChildrenModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementChildrenModule, declarations: [ElementChildrenComponent], imports: [ElementRendererModule], exports: [ElementChildrenComponent] });
-ElementChildrenModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementChildrenModule, imports: [[ElementRendererModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementChildrenModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ElementChildrenComponent],
-                    imports: [ElementRendererModule],
-                    exports: [ElementChildrenComponent],
-                }]
-        }] });
+CompilationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CompilationService, deps: [{ token: i0.Compiler }], target: i0.ɵɵFactoryTarget.Injectable });
+CompilationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CompilationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CompilationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Compiler }]; } });
 
-class PreviewModule {
+class RuntimeModule {
 }
-PreviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PreviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PreviewModule, declarations: [PreviewComponent], imports: [CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule], exports: [PreviewComponent] });
-PreviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PreviewModule, providers: [IntegrationState], imports: [[CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PreviewModule, decorators: [{
+RuntimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RuntimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RuntimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RuntimeModule, imports: [CommonModule, CoreModule] });
+RuntimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RuntimeModule, providers: [
+        DialogService,
+        RuntimeService,
+        RuntimeEditorService,
+        { provide: CMS_COMPILATION_SERVICE, useClass: CompilationService },
+    ], imports: [[CommonModule, CoreModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RuntimeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PreviewComponent],
-                    imports: [CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule],
-                    providers: [IntegrationState],
-                    exports: [PreviewComponent],
+                    imports: [CommonModule, CoreModule],
+                    providers: [
+                        DialogService,
+                        RuntimeService,
+                        RuntimeEditorService,
+                        { provide: CMS_COMPILATION_SERVICE, useClass: CompilationService },
+                    ],
                 }]
         }] });
 
-function ElementDefinition(definition) {
-    return function (constructor) {
-        return constructor;
-    };
-}
-
 class LauncherModule {
 }
 LauncherModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LauncherModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LauncherModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LauncherModule, imports: [CommonModule, CoreModule, ApiModule, SdkCoreModule] });
-LauncherModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LauncherModule, providers: [LauncherService, IntegrationState, DynamicModuleService, DialogService], imports: [[CommonModule, CoreModule, ApiModule, SdkCoreModule]] });
+LauncherModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LauncherModule, imports: [CommonModule, CoreModule, ApiModule, SdkCoreModule, RuntimeModule, PreviewModule], exports: [PreviewModule] });
+LauncherModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LauncherModule, providers: [IntegrationState, DialogService], imports: [[CommonModule, CoreModule, ApiModule, SdkCoreModule, RuntimeModule, PreviewModule], PreviewModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LauncherModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, CoreModule, ApiModule, SdkCoreModule],
-                    providers: [LauncherService, IntegrationState, DynamicModuleService, DialogService],
+                    imports: [CommonModule, CoreModule, ApiModule, SdkCoreModule, RuntimeModule, PreviewModule],
+                    providers: [IntegrationState, DialogService],
+                    exports: [PreviewModule],
                 }]
         }] });
 
@@ -1446,5 +1842,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApplyProductConfigurationAction, CloseDocGenAction, ConfigureProductAction, DEFAULT_PLUGINS_TOKEN, ELEMENT_CONFIG, ELEMENT_METADATA, ElementComponent, ElementDefinition, ElementsResolver, FlowAction, IntegrationState, LauncherModule, LauncherService, NavigateBackAction, NavigateToCatalogAction, OpenDocGenAction, PreviewComponent, PreviewModule, RemoteApplyAction, RemoteCancelAction, SHARED_ELEMENT_METADATA, SetDefaultMetrics, SwitchObjectAction, TemplatesService, UI_DEFINITION_METADATA, UiBuildError, VENDOR_MAP, doesElementSupportIO, elementToMetadata, extendElementMetadata, extractElementMetadata, findElementByModule, flattenElements, getAbsolutePath, getElementConfig, isSharedElement, isValidScript, metadataToElement, normalizeElementMetadata, parseBoundPath, parsePath, stringifyElementMetadata };
+export { ApplyProductConfigurationAction, CloseDocGenAction, ConfigureProductAction, DEFAULT_PLUGINS_TOKEN, ELEMENT_CONFIG, ELEMENT_METADATA, ElementComponent, ElementDefinition, ElementsResolver, FlowAction, IntegrationState, LauncherModule, NavigateBackAction, NavigateToCatalogAction, OpenDocGenAction, PreviewComponent, PreviewModule, RemoteApplyAction, RemoteCancelAction, RuntimeEditorService, RuntimeModule, SHARED_ELEMENT_METADATA, SetDefaultMetrics, SwitchObjectAction, TemplatesService, UI_DEFINITION_METADATA, UiBuildError, VENDOR_MAP, doesElementSupportIO, elementToMetadata, extendElementMetadata, extractElementMetadata, findElementByModule, findElementByPath, flattenElements, getAbsolutePath, getElementConfig, getElementUniqueName, insertElement, isSharedElement, isValidScript, metadataToElement, normalizeElementMetadata, parseBoundPath, parsePath, removeElement, stringifyElementMetadata };
 //# sourceMappingURL=veloceapps-sdk-cms.js.map