@veloceapps/sdk 2.0.3 → 2.0.5

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@veloce/core'), require('@veloce/sdk/runtime'), require('rxjs/operators'), require('lodash'), require('@veloce/api'), require('primeng/api'), require('@angular/common'), require('@angular/forms'), require('@babel/standalone'), require('@veloce/components')) :
-    typeof define === 'function' && define.amd ? define('@veloce/sdk/cms', ['exports', '@angular/core', 'rxjs', '@veloce/core', '@veloce/sdk/runtime', 'rxjs/operators', 'lodash', '@veloce/api', 'primeng/api', '@angular/common', '@angular/forms', '@babel/standalone', '@veloce/components'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.veloce = global.veloce || {}, global.veloce.sdk = global.veloce.sdk || {}, global.veloce.sdk.cms = {}), global.ng.core, global.rxjs, global["@veloce/core"], global.veloce.sdk.runtime, global.rxjs.operators, global.lodash, global["@veloce/api"], global["primeng/api"], global.ng.common, global.ng.forms, global["@babel/standalone"], global["@veloce/components"]));
-})(this, (function (exports, i0, rxjs, core, i2, rxjsOperators, lodash, i1, i3, i6, angularForms, standalone, i4) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common'), require('@angular/forms'), require('@veloce/core'), require('lodash'), require('@veloce/sdk/runtime'), require('rxjs/operators'), require('@veloce/api'), require('primeng/api'), require('@babel/standalone'), require('@veloce/components')) :
+    typeof define === 'function' && define.amd ? define('@veloce/sdk/cms', ['exports', '@angular/core', 'rxjs', '@angular/common', '@angular/forms', '@veloce/core', 'lodash', '@veloce/sdk/runtime', 'rxjs/operators', '@veloce/api', 'primeng/api', '@babel/standalone', '@veloce/components'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.veloce = global.veloce || {}, global.veloce.sdk = global.veloce.sdk || {}, global.veloce.sdk.cms = {}), global.ng.core, global.rxjs, global.ng.common, global.ng.forms, global["@veloce/core"], global.lodash, global.veloce.sdk.runtime, global.rxjs.operators, global["@veloce/api"], global["primeng/api"], global["@babel/standalone"], global["@veloce/components"]));
+})(this, (function (exports, i0, rxjs, i7, angularForms, core, lodash, i2, rxjsOperators, i1, i2$1, standalone, i5) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -24,14 +24,14 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var rxjs__namespace = /*#__PURE__*/_interopNamespace(rxjs);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var rxjsOperators__namespace = /*#__PURE__*/_interopNamespace(rxjsOperators);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
+    var angularForms__namespace = /*#__PURE__*/_interopNamespace(angularForms);
     var lodash__namespace = /*#__PURE__*/_interopNamespace(lodash);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2);
+    var rxjsOperators__namespace = /*#__PURE__*/_interopNamespace(rxjsOperators);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-    var angularForms__namespace = /*#__PURE__*/_interopNamespace(angularForms);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2$1);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -414,6 +414,239 @@
         __param(0, i0.Inject(i0.Injector))
     ], exports.ElementComponent);
 
+    var parsePath = function (path) {
+        var _a, _b, _c, _d;
+        var segments = path.split('/');
+        var module;
+        var variable;
+        if ((_a = segments[0]) === null || _a === void 0 ? void 0 : _a.startsWith('@')) {
+            module = (_b = segments.shift()) === null || _b === void 0 ? void 0 : _b.substring(1);
+        }
+        if (((_c = segments[segments.length - 1]) === null || _c === void 0 ? void 0 : _c[0]) === ':') {
+            variable = (_d = segments.pop()) === null || _d === void 0 ? void 0 : _d.substring(1);
+        }
+        return {
+            segments: segments,
+            module: module,
+            variable: variable,
+        };
+    };
+    var findElementByModule = function (elements, module, elementName) {
+        var e_1, _e;
+        try {
+            for (var elements_1 = __values(elements), elements_1_1 = elements_1.next(); !elements_1_1.done; elements_1_1 = elements_1.next()) {
+                var el = elements_1_1.value;
+                if (el.module === module && el.name === elementName) {
+                    return el;
+                }
+                var child = findElementByModule(el.children, module, elementName);
+                if (child) {
+                    return child;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (elements_1_1 && !elements_1_1.done && (_e = elements_1.return)) _e.call(elements_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return;
+    };
+    var getAbsolutePath = function (elements, subject, path) {
+        var _a, _b, _c, _d;
+        if (path.module) {
+            return (_a = findElementByModule(elements, path.module, path.segments[0])) === null || _a === void 0 ? void 0 : _a.path;
+        }
+        var subjectSegments = (_c = (_b = subject.path) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [];
+        var isRelativePath = ((_d = path.segments[0]) === null || _d === void 0 ? void 0 : _d[0]) === '.';
+        if (!isRelativePath) {
+            return path.segments.join('/');
+        }
+        var segments = __spreadArray([], __read(path.segments));
+        while (segments.length) {
+            var segment = segments.shift();
+            if (segment === '..') {
+                subjectSegments.pop();
+            }
+            else if (segment) {
+                subjectSegments.push(segment);
+            }
+        }
+        return subjectSegments.join('/');
+    };
+
+    var DynamicModuleService = /** @class */ (function () {
+        function DynamicModuleService() {
+            this._elementsTree = [];
+            this._componentFactories = [];
+        }
+        Object.defineProperty(DynamicModuleService.prototype, "componentFactories", {
+            get: function () {
+                return this._componentFactories;
+            },
+            set: function (data) {
+                this._componentFactories = data;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DynamicModuleService.prototype.getComponentFactory = function (element) {
+            return this.componentFactories.find(function (f) { return f.componentType.path === element.path; });
+        };
+        Object.defineProperty(DynamicModuleService.prototype, "elementsTree", {
+            get: function () {
+                return this._elementsTree;
+            },
+            set: function (tree) {
+                this._elementsTree = tree;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DynamicModuleService.prototype.clear = function () {
+            this._elementsTree = [];
+            this.componentFactories = [];
+        };
+        return DynamicModuleService;
+    }());
+    DynamicModuleService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicModuleService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    DynamicModuleService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicModuleService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicModuleService, decorators: [{
+                type: i0.Injectable
+            }] });
+
+    var IOProviderService = /** @class */ (function () {
+        function IOProviderService(dynamicModuleService) {
+            this.dynamicModuleService = dynamicModuleService;
+            this.inputs = {};
+        }
+        IOProviderService.prototype.connect = function (el, name, target) {
+            var _a;
+            return (_a = this.resolveTarget(el, name, target)) === null || _a === void 0 ? void 0 : _a.asObservable();
+        };
+        IOProviderService.prototype.provide = function (el, name, target) {
+            return this.resolveTarget(el, name, target);
+        };
+        IOProviderService.prototype.resolveTarget = function (el, name, target) {
+            var _a, _b;
+            var isHost = !target;
+            if (isHost) {
+                return this.createSubjectSafe((_a = el.path) !== null && _a !== void 0 ? _a : '', name);
+            }
+            var elPath = parsePath(target);
+            var pathIsValue = elPath.segments.length === 1 && elPath.segments[0].startsWith('"') && elPath.segments[0].endsWith('"');
+            var finalName = (_b = elPath.variable) !== null && _b !== void 0 ? _b : name;
+            var value = pathIsValue ? new rxjs.BehaviorSubject(elPath.segments[0].slice(1, -1)) : undefined;
+            var absolutePath = !pathIsValue ? getAbsolutePath(this.dynamicModuleService.elementsTree, el, elPath) : el.path;
+            return this.createSubjectSafe(absolutePath !== null && absolutePath !== void 0 ? absolutePath : '', finalName, value);
+        };
+        IOProviderService.prototype.createSubjectSafe = function (path, name, subject) {
+            if (!this.inputs[path]) {
+                this.inputs[path] = {};
+            }
+            if (!this.inputs[path][name]) {
+                this.inputs[path][name] = subject !== null && subject !== void 0 ? subject : new rxjs.BehaviorSubject(undefined);
+            }
+            return this.inputs[path][name];
+        };
+        return IOProviderService;
+    }());
+    IOProviderService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IOProviderService, deps: [{ token: DynamicModuleService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    IOProviderService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IOProviderService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IOProviderService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: DynamicModuleService }]; } });
+
+    var TemplatesService = /** @class */ (function () {
+        function TemplatesService() {
+            this.templates = {};
+        }
+        TemplatesService.prototype.register = function (name, templateRef) {
+            this.templates[name] = templateRef;
+        };
+        TemplatesService.prototype.get = function (name) {
+            return this.templates[name];
+        };
+        return TemplatesService;
+    }());
+    TemplatesService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TemplatesService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TemplatesService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TemplatesService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TemplatesService, decorators: [{
+                type: i0.Injectable
+            }] });
+
+    var EXPORTED_CLASS_REGEX = /export class (\S+)/;
+    var METADATA_DECORATOR_REGEX = /@ElementDefinition\(([\s\S]+)\)(\n|.)*export class/g;
+    var elementToMetadata = function (el, parentPath) {
+        var _a;
+        var script = el.script && window.atob(el.script);
+        var template = el.template && window.atob(el.template);
+        var styles = el.styles && window.atob(el.styles);
+        var exportedClassName = script && ((_a = EXPORTED_CLASS_REGEX.exec(script)) !== null && _a !== void 0 ? _a : [])[1];
+        if (!exportedClassName) {
+            console.error("Script doesn't have exported class");
+        }
+        var elementMetadata = extractElementMetadata(script || '');
+        var path = (parentPath ? parentPath + '/' : '') + elementMetadata.name;
+        return Object.assign(Object.assign({}, elementMetadata), { path: path, script: script === null || script === void 0 ? void 0 : script.replace(METADATA_DECORATOR_REGEX, 'export class'), template: template, styles: styles, children: el.children.map(function (child) { return elementToMetadata(child, path); }) });
+    };
+    var metadataToElement = function (metadata) {
+        var elMetadata = {
+            name: metadata.name,
+            type: metadata.type,
+            model: metadata.model,
+            module: metadata.module,
+            reference: metadata.reference,
+            inputs: metadata.inputs,
+            outputs: metadata.outputs,
+            children: metadata.children.map(function (_b) {
+                var name = _b.name;
+                return name;
+            }),
+        };
+        var script = metadata.script &&
+            window.btoa(metadata.script.replace(EXPORTED_CLASS_REGEX, "@ElementDefinition(" + JSON.stringify(elMetadata) + ") export class Script"));
+        var template = metadata.template && window.btoa(metadata.template);
+        var styles = metadata.styles && window.btoa(metadata.styles);
+        return {
+            script: script,
+            template: template,
+            styles: styles,
+            children: metadata.children.map(function (meta) { return metadataToElement(meta); }),
+        };
+    };
+    var extractElementMetadata = function (script) {
+        var _a;
+        var 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 eval("(" + metadataString + ")");
+    };
+    var extendElementMetadata = function (script, extend) {
+        var _a;
+        var 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;
+        }
+        var updated = Object.assign(Object.assign({}, eval("(" + metadataString + ")")), extend);
+        return script.replace(metadataString, JSON.stringify(updated));
+    };
+
+    var ElementContextService = /** @class */ (function () {
+        function ElementContextService() {
+        }
+        return ElementContextService;
+    }());
+    ElementContextService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementContextService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ElementContextService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementContextService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementContextService, decorators: [{
+                type: i0.Injectable
+            }] });
+
     var parseBoundPath = function (path) {
         var _a, _b;
         var regexp = new RegExp("(?:\\/)(?:\\w+)(?:\\/)(?:ports|attributes)(?:\\/)(?:\\w+)|(?:\\/)(?:\\w+)", 'g');
@@ -561,41 +794,171 @@
         return lineItem;
     };
 
-    var ConfigurationService = /** @class */ (function () {
-        function ConfigurationService(apiService, contextService, configurationApiService, messageService) {
+    var RuntimeContextService = /** @class */ (function () {
+        function RuntimeContextService(configurationApiService, messageService) {
+            this.configurationApiService = configurationApiService;
+            this.messageService = messageService;
+        }
+        RuntimeContextService.prototype.getRuntimeContext = function (productId, offeringId) {
+            var _this = this;
+            return this.configurationApiService.getRuntimeDataByProductId(productId, offeringId).pipe(rxjsOperators.map(function (runtimeData) {
+                var _a, _b;
+                var uiDefinition = _this.getUIDefinition(runtimeData);
+                var runtimeModel = core.RuntimeModel.create(runtimeData.types, runtimeData.products);
+                var _c = (_a = Array.from(runtimeModel.components.values()).find(function (c) { return c.productId === productId; })) !== null && _a !== void 0 ? _a : {}, productName = _c.productName, properties = _c.properties;
+                return {
+                    modelId: runtimeData.modelId,
+                    uiDefinition: uiDefinition,
+                    runtimeModel: runtimeModel,
+                    runtimeMode: i2.RuntimeMode.PROD,
+                    productId: productId,
+                    productType: (properties === null || properties === void 0 ? void 0 : properties.displayName) || productName,
+                    offeringId: offeringId,
+                    properties: {
+                        PricingEnabled: (_b = uiDefinition === null || uiDefinition === void 0 ? void 0 : uiDefinition.properties) === null || _b === void 0 ? void 0 : _b.pricingEnabled,
+                    },
+                };
+            }));
+        };
+        RuntimeContextService.prototype.getUIDefinition = function (runtimeData) {
+            var _a;
+            var rawUiDefinitions;
+            try {
+                rawUiDefinitions = JSON.parse(runtimeData.uiDefinitionsSource);
+            }
+            catch (e) {
+                return;
+            }
+            var uiDefinitions = rawUiDefinitions.filter(function (uiDef) { return uiDef.version; });
+            var uiDefinition = (_a = uiDefinitions.find(function (uiDef) { return uiDef.primary; })) !== null && _a !== void 0 ? _a : uiDefinitions[0];
+            if (!uiDefinition) {
+                var errMsg = "Unable to find Default UI";
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'ERROR',
+                });
+                throw new Error(errMsg);
+            }
+            return uiDefinition;
+        };
+        return RuntimeContextService;
+    }());
+    RuntimeContextService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RuntimeContextService, deps: [{ token: i1__namespace.ConfigurationApiService }, { token: i2__namespace.MessageService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    RuntimeContextService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RuntimeContextService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RuntimeContextService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: i1__namespace.ConfigurationApiService }, { type: i2__namespace.MessageService }]; } });
+
+    var ConfigurationRuntimeService = /** @class */ (function () {
+        function ConfigurationRuntimeService(apiService, contextService, runtimeContextService) {
             this.apiService = apiService;
             this.contextService = contextService;
+            this.runtimeContextService = runtimeContextService;
+            this._isInitialized = new rxjs.BehaviorSubject(false);
+            this.uiDefinitionProperties = {};
+        }
+        ConfigurationRuntimeService.prototype.initTestMode = function (modelId, uiDefinitionProperties) {
+            var _this = this;
+            this.uiDefinitionProperties = uiDefinitionProperties;
+            return rxjs.combineLatest([
+                this.apiService.getRuntimeDataByModelId(modelId),
+                this.contextService.create('TestId', core.ConfigurationContextMode.TEST),
+            ]).pipe(rxjsOperators.first(), rxjsOperators.tap(function (_d) {
+                var _e = __read(_d, 1), runtimeData = _e[0];
+                var runtimeModel = core.RuntimeModel.create(runtimeData.types, runtimeData.products);
+                var runtimeContext = {
+                    modelId: modelId,
+                    runtimeModel: runtimeModel,
+                    runtimeMode: i2.RuntimeMode.TEST,
+                };
+                _this._runtimeContext = runtimeContext;
+                _this._isInitialized.next(true);
+            }));
+        };
+        ConfigurationRuntimeService.prototype.init = function (props) {
+            var _this = this;
+            this._assets = props.assets;
+            var configurationContext = this.contextService.resolve();
+            if (!configurationContext) {
+                return rxjs.of();
+            }
+            return this.runtimeContextService.getRuntimeContext(props.productId, props.offeringId).pipe(rxjsOperators.tap(function (runtimeContext) {
+                var _a, _b, _c;
+                _this.uiDefinitionProperties = (_b = (_a = runtimeContext.uiDefinition) === null || _a === void 0 ? void 0 : _a.properties) !== null && _b !== void 0 ? _b : {};
+                var mergeContext = Object.assign(Object.assign({}, runtimeContext), { properties: Object.assign(Object.assign({}, runtimeContext.properties), configurationContext.properties) });
+                var accountId = (_c = mergeContext.properties) === null || _c === void 0 ? void 0 : _c.AccountId;
+                if (accountId && accountId.length === 15) {
+                    _this.patchContext(mergeContext, {
+                        properties: { AccountId: core.SalesforceIdUtils.generateId18FromId15(accountId) },
+                    });
+                }
+                _this._runtimeContext = mergeContext;
+                _this._isInitialized.next(true);
+            }));
+        };
+        ConfigurationRuntimeService.prototype.patchContext = function (context, patch) {
+            lodash.merge(context, patch);
+        };
+        ConfigurationRuntimeService.prototype.getAsset = function (lineItem) {
+            return this._assets && this._assets.find(function (a) { return a.id === lineItem.openOrderLineItemId || a.id === lineItem.assetId; });
+        };
+        Object.defineProperty(ConfigurationRuntimeService.prototype, "isInitialized$", {
+            get: function () {
+                return this._isInitialized.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ConfigurationRuntimeService.prototype, "isInitialized", {
+            get: function () {
+                return this._isInitialized.getValue();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ConfigurationRuntimeService.prototype, "runtimeModel", {
+            get: function () {
+                var _a;
+                return (_a = this.runtimeContext) === null || _a === void 0 ? void 0 : _a.runtimeModel;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ConfigurationRuntimeService.prototype, "runtimeContext", {
+            get: function () {
+                return this._runtimeContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ConfigurationRuntimeService;
+    }());
+    ConfigurationRuntimeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationRuntimeService, deps: [{ token: i1__namespace.ConfigurationApiService }, { token: i2__namespace$1.ContextService }, { token: RuntimeContextService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ConfigurationRuntimeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationRuntimeService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationRuntimeService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: i1__namespace.ConfigurationApiService }, { type: i2__namespace$1.ContextService }, { type: RuntimeContextService }]; } });
+
+    var ConfigurationService = /** @class */ (function () {
+        function ConfigurationService(runtimeService, contextService, configurationApiService, messageService) {
+            this.runtimeService = runtimeService;
+            this.contextService = contextService;
             this.configurationApiService = configurationApiService;
             this.messageService = messageService;
             this.mode = core.ConfigurationMode.SEARCH;
             this.states = {};
-            this.uiDefinitionProperties = {};
             this.lineItem = new rxjs.BehaviorSubject(undefined);
+            this.charges = new rxjs.BehaviorSubject({});
         }
-        ConfigurationService.prototype.init = function (modelId, uiDefinitionProperties) {
-            var _this = this;
-            this.uiDefinitionProperties = uiDefinitionProperties;
-            return rxjs.combineLatest([
-                this.apiService.getRuntimeDataByModelId(modelId),
-                this.contextService.create('TestId', core.ConfigurationContextMode.TEST),
-            ]).pipe(rxjsOperators.first(), rxjsOperators.switchMap(function (_d) {
-                var _e = __read(_d, 1), runtimeData = _e[0];
-                _this.runtimeModel = core.RuntimeModel.create(runtimeData.types, runtimeData.products);
-                var runtimeContext = {
-                    modelId: modelId,
-                    runtimeModel: _this.runtimeModel,
-                    runtimeMode: i2.RuntimeMode.TEST,
-                };
-                _this.runtimeContext = runtimeContext;
-                return _this.configure();
-            }));
-        };
         ConfigurationService.prototype.patch = function (lineItem) {
             var _this = this;
             if (!this.lineItem.value) {
                 return;
             }
             this.states.configurableRamp = new LineItemWorker(this.lineItem.value).replace(lineItem).li;
+            this.states.asset = this.states.configurableRamp
+                ? this.runtimeService.getAsset(this.states.configurableRamp)
+                : undefined;
             this.configure()
                 .pipe(rxjsOperators.catchError(function (error) {
                 _this.messageService.add({
@@ -608,52 +971,72 @@
             }))
                 .subscribe();
         };
+        ConfigurationService.prototype.updateCurrentStates = function (update) {
+            this.states = Object.assign(Object.assign({}, this.states), update);
+        };
         ConfigurationService.prototype.get = function () {
-            var _a;
-            return (_a = this.lineItem) === null || _a === void 0 ? void 0 : _a.asObservable().pipe(rxjs.shareReplay());
+            return this.lineItem.asObservable().pipe(rxjs.shareReplay());
         };
         ConfigurationService.prototype.getSnapshot = function () {
             return this.lineItem.value ? Object.assign({}, this.lineItem.value) : undefined;
         };
         ConfigurationService.prototype.getRuntimeModel = function () {
-            return this.runtimeModel;
+            return this.runtimeService.runtimeModel;
         };
         ConfigurationService.prototype.getRuntimeContext = function () {
-            return this.runtimeContext;
+            return this.runtimeService.runtimeContext;
         };
+        Object.defineProperty(ConfigurationService.prototype, "charges$", {
+            get: function () {
+                return this.charges.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ConfigurationService.prototype, "chargesSnapshot", {
+            get: function () {
+                return this.charges.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         ConfigurationService.prototype.configure = function () {
             var _this = this;
-            var _a, _b;
-            if (!this.runtimeContext || !this.runtimeModel) {
+            var _a, _b, _c, _d;
+            var runtimeContext = this.getRuntimeContext();
+            var runtimeModel = this.getRuntimeModel();
+            if (!runtimeContext || !runtimeModel) {
                 return rxjs.of(undefined);
             }
-            var lineItem = (_a = this.states.configurableRamp) !== null && _a !== void 0 ? _a : getDefaultLineItem(this.runtimeContext, this.uiDefinitionProperties);
+            var uiDefinitionProperties = Object.assign(Object.assign({}, ((_b = (_a = runtimeContext.uiDefinition) === null || _a === void 0 ? void 0 : _a.properties) !== null && _b !== void 0 ? _b : {})), ((_c = this.runtimeService.uiDefinitionProperties) !== null && _c !== void 0 ? _c : {}));
+            var lineItem = (_d = this.states.configurableRamp) !== null && _d !== void 0 ? _d : getDefaultLineItem(runtimeContext, uiDefinitionProperties);
             var configurationRequest = this.createRequest(lineItem);
             configurationRequest.lineItems = this.states.currentState || [];
             configurationRequest.asset = this.states.asset;
-            var runtimeModel = (_b = this.runtimeContext) === null || _b === void 0 ? void 0 : _b.runtimeModel;
             var request$;
-            if (this.uiDefinitionProperties.pricingEnabled) {
-                request$ = this.configurationApiService.configureAndPriceLineItem(configurationRequest, this.runtimeModel).pipe(rxjsOperators.map(function (_d) {
-                    var lineItem = _d.lineItem, context = _d.context;
+            if (uiDefinitionProperties.pricingEnabled) {
+                request$ = this.configurationApiService.configureAndPriceLineItem(configurationRequest, runtimeModel).pipe(rxjsOperators.map(function (_e) {
+                    var lineItem = _e.lineItem, context = _e.context, charges = _e.charges;
                     if (context) {
                         _this.contextService.update({ properties: context.properties });
                     }
+                    _this.charges.next(charges !== null && charges !== void 0 ? charges : {});
                     return lineItem;
                 }));
             }
             else {
                 request$ = this.configurationApiService.configureLineItem(configurationRequest, runtimeModel);
             }
-            return request$.pipe(rxjsOperators.tap(function (lineItem) { var _a; return lineItem && ((_a = _this.lineItem) === null || _a === void 0 ? void 0 : _a.next(lineItem)); }), rxjsOperators.catchError(function (error) { return rxjs.throwError(function () { var _a; return new Error(((_a = error.error) === null || _a === void 0 ? void 0 : _a.message) || error.message || JSON.stringify(error)); }); }));
+            return request$.pipe(rxjsOperators.tap(function (lineItem) { return lineItem && _this.lineItem.next(lineItem); }), rxjsOperators.catchError(function (error) { return rxjs.throwError(function () { var _a; return new Error(((_a = error.error) === null || _a === void 0 ? void 0 : _a.message) || error.message || JSON.stringify(error)); }); }));
         };
         ConfigurationService.prototype.createRequest = function (lineItem) {
             var _a, _b, _c;
-            var runtimeContext = this.runtimeContext;
+            var runtimeContext = this.getRuntimeContext();
+            var uiDefinitionProperties = this.runtimeService.uiDefinitionProperties;
             if (runtimeContext.runtimeMode === i2.RuntimeMode.TEST) {
-                var properties = Object.assign(Object.assign({}, runtimeContext.properties), { ModelId: runtimeContext.modelId, RuntimeMode: core.ConfigurationContextMode.TEST, PricingEnabled: String(this.uiDefinitionProperties.pricingEnabled), StartDate: (_b = (_a = runtimeContext.properties) === null || _a === void 0 ? void 0 : _a.StartDate) !== null && _b !== void 0 ? _b : new Date().toISOString().substring(0, 10), PriceListId: this.uiDefinitionProperties.priceList });
+                var properties = Object.assign(Object.assign({}, runtimeContext.properties), { ModelId: runtimeContext.modelId, RuntimeMode: core.ConfigurationContextMode.TEST, PricingEnabled: String(uiDefinitionProperties.pricingEnabled), StartDate: (_b = (_a = runtimeContext.properties) === null || _a === void 0 ? void 0 : _a.StartDate) !== null && _b !== void 0 ? _b : new Date().toISOString().substring(0, 10), PriceListId: uiDefinitionProperties.priceList });
                 var ctx = {
-                    priceListId: this.uiDefinitionProperties.priceList,
+                    priceListId: uiDefinitionProperties.priceList,
                     properties: properties,
                 };
                 this.contextService.update(ctx);
@@ -662,7 +1045,8 @@
                 var context = this.contextService.resolve();
                 if ((context === null || context === void 0 ? void 0 : context.properties) && ((_c = runtimeContext.properties) === null || _c === void 0 ? void 0 : _c.StartDate)) {
                     this.contextService.update({
-                        properties: Object.assign(Object.assign({}, context.properties), runtimeContext.properties),
+                        priceListId: uiDefinitionProperties.priceList,
+                        properties: Object.assign(Object.assign(Object.assign({}, context.properties), runtimeContext.properties), { PricingEnabled: String(uiDefinitionProperties.pricingEnabled), PriceListId: uiDefinitionProperties.priceList }),
                     });
                 }
             }
@@ -676,244 +1060,11 @@
         };
         return ConfigurationService;
     }());
-    ConfigurationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationService, deps: [{ token: i1__namespace.ConfigurationApiService }, { token: i2__namespace.ContextService }, { token: i1__namespace.ConfigurationApiService }, { token: i3__namespace.MessageService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ConfigurationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i1__namespace.ConfigurationApiService }, { type: i2__namespace.ContextService }, { type: i1__namespace.ConfigurationApiService }, { type: i3__namespace.MessageService }]; } });
-
-    var parsePath = function (path) {
-        var _a, _b, _c, _d;
-        var segments = path.split('/');
-        var module;
-        var variable;
-        if ((_a = segments[0]) === null || _a === void 0 ? void 0 : _a.startsWith('@')) {
-            module = (_b = segments.shift()) === null || _b === void 0 ? void 0 : _b.substring(1);
-        }
-        if (((_c = segments[segments.length - 1]) === null || _c === void 0 ? void 0 : _c[0]) === ':') {
-            variable = (_d = segments.pop()) === null || _d === void 0 ? void 0 : _d.substring(1);
-        }
-        return {
-            segments: segments,
-            module: module,
-            variable: variable,
-        };
-    };
-    var findElementByModule = function (elements, module, elementName) {
-        var e_1, _e;
-        try {
-            for (var elements_1 = __values(elements), elements_1_1 = elements_1.next(); !elements_1_1.done; elements_1_1 = elements_1.next()) {
-                var el = elements_1_1.value;
-                if (el.module === module && el.name === elementName) {
-                    return el;
-                }
-                var child = findElementByModule(el.children, module, elementName);
-                if (child) {
-                    return child;
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (elements_1_1 && !elements_1_1.done && (_e = elements_1.return)) _e.call(elements_1);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        return;
-    };
-    var getAbsolutePath = function (elements, subject, path) {
-        var _a, _b, _c, _d;
-        if (path.module) {
-            return (_a = findElementByModule(elements, path.module, path.segments[0])) === null || _a === void 0 ? void 0 : _a.path;
-        }
-        var subjectSegments = (_c = (_b = subject.path) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [];
-        var isRelativePath = ((_d = path.segments[0]) === null || _d === void 0 ? void 0 : _d[0]) === '.';
-        if (!isRelativePath) {
-            return path.segments.join('/');
-        }
-        var segments = __spreadArray([], __read(path.segments));
-        while (segments.length) {
-            var segment = segments.shift();
-            if (segment === '..') {
-                subjectSegments.pop();
-            }
-            else if (segment) {
-                subjectSegments.push(segment);
-            }
-        }
-        return subjectSegments.join('/');
-    };
-
-    var DynamicModuleService = /** @class */ (function () {
-        function DynamicModuleService() {
-            this._elementsTree = [];
-            this._componentFactories = [];
-        }
-        Object.defineProperty(DynamicModuleService.prototype, "componentFactories", {
-            get: function () {
-                return this._componentFactories;
-            },
-            set: function (data) {
-                this._componentFactories = data;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DynamicModuleService.prototype.getComponentFactory = function (element) {
-            return this.componentFactories.find(function (f) { return f.componentType.path === element.path; });
-        };
-        Object.defineProperty(DynamicModuleService.prototype, "elementsTree", {
-            get: function () {
-                return this._elementsTree;
-            },
-            set: function (tree) {
-                this._elementsTree = tree;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DynamicModuleService.prototype.clear = function () {
-            this._elementsTree = [];
-            this.componentFactories = [];
-        };
-        return DynamicModuleService;
-    }());
-    DynamicModuleService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: DynamicModuleService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    DynamicModuleService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: DynamicModuleService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: DynamicModuleService, decorators: [{
-                type: i0.Injectable
-            }] });
-
-    var IOProviderService = /** @class */ (function () {
-        function IOProviderService(dynamicModuleService) {
-            this.dynamicModuleService = dynamicModuleService;
-            this.inputs = {};
-        }
-        IOProviderService.prototype.connect = function (el, name, target) {
-            var _a;
-            return (_a = this.resolveTarget(el, name, target)) === null || _a === void 0 ? void 0 : _a.asObservable();
-        };
-        IOProviderService.prototype.provide = function (el, name, target) {
-            return this.resolveTarget(el, name, target);
-        };
-        IOProviderService.prototype.resolveTarget = function (el, name, target) {
-            var _a, _b;
-            var isHost = !target;
-            if (isHost) {
-                return this.createSubjectSafe((_a = el.path) !== null && _a !== void 0 ? _a : '', name);
-            }
-            var elPath = parsePath(target);
-            var pathIsValue = elPath.segments.length === 1 && elPath.segments[0].startsWith('"') && elPath.segments[0].endsWith('"');
-            var finalName = (_b = elPath.variable) !== null && _b !== void 0 ? _b : name;
-            var value = pathIsValue ? new rxjs.BehaviorSubject(elPath.segments[0].slice(1, -1)) : undefined;
-            var absolutePath = !pathIsValue ? getAbsolutePath(this.dynamicModuleService.elementsTree, el, elPath) : el.path;
-            return this.createSubjectSafe(absolutePath !== null && absolutePath !== void 0 ? absolutePath : '', finalName, value);
-        };
-        IOProviderService.prototype.createSubjectSafe = function (path, name, subject) {
-            if (!this.inputs[path]) {
-                this.inputs[path] = {};
-            }
-            if (!this.inputs[path][name]) {
-                this.inputs[path][name] = subject !== null && subject !== void 0 ? subject : new rxjs.BehaviorSubject(undefined);
-            }
-            return this.inputs[path][name];
-        };
-        return IOProviderService;
-    }());
-    IOProviderService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: IOProviderService, deps: [{ token: DynamicModuleService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    IOProviderService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: IOProviderService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: IOProviderService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: DynamicModuleService }]; } });
-
-    var TemplatesService = /** @class */ (function () {
-        function TemplatesService() {
-            this.templates = {};
-        }
-        TemplatesService.prototype.register = function (name, templateRef) {
-            this.templates[name] = templateRef;
-        };
-        TemplatesService.prototype.get = function (name) {
-            return this.templates[name];
-        };
-        return TemplatesService;
-    }());
-    TemplatesService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TemplatesService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    TemplatesService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TemplatesService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TemplatesService, decorators: [{
-                type: i0.Injectable
-            }] });
-
-    var EXPORTED_CLASS_REGEX = /export class (\S+)/;
-    var METADATA_DECORATOR_REGEX = /@ElementDefinition\(([\s\S]+)\)(\n|.)*export class/g;
-    var elementToMetadata = function (el, parentPath) {
-        var _a;
-        var script = el.script && window.atob(el.script);
-        var template = el.template && window.atob(el.template);
-        var styles = el.styles && window.atob(el.styles);
-        var exportedClassName = script && ((_a = EXPORTED_CLASS_REGEX.exec(script)) !== null && _a !== void 0 ? _a : [])[1];
-        if (!exportedClassName) {
-            console.error("Script doesn't have exported class");
-        }
-        var elementMetadata = extractElementMetadata(script || '');
-        var path = (parentPath ? parentPath + '/' : '') + elementMetadata.name;
-        return Object.assign(Object.assign({}, elementMetadata), { path: path, script: script === null || script === void 0 ? void 0 : script.replace(METADATA_DECORATOR_REGEX, 'export class'), template: template, styles: styles, children: el.children.map(function (child) { return elementToMetadata(child, path); }) });
-    };
-    var metadataToElement = function (metadata) {
-        var elMetadata = {
-            name: metadata.name,
-            type: metadata.type,
-            model: metadata.model,
-            module: metadata.module,
-            reference: metadata.reference,
-            inputs: metadata.inputs,
-            outputs: metadata.outputs,
-            children: metadata.children.map(function (_b) {
-                var name = _b.name;
-                return name;
-            }),
-        };
-        var script = metadata.script &&
-            window.btoa(metadata.script.replace(EXPORTED_CLASS_REGEX, "@ElementDefinition(" + JSON.stringify(elMetadata) + ") export class Script"));
-        var template = metadata.template && window.btoa(metadata.template);
-        var styles = metadata.styles && window.btoa(metadata.styles);
-        return {
-            script: script,
-            template: template,
-            styles: styles,
-            children: metadata.children.map(function (meta) { return metadataToElement(meta); }),
-        };
-    };
-    var extractElementMetadata = function (script) {
-        var _a;
-        var 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 eval("(" + metadataString + ")");
-    };
-    var extendElementMetadata = function (script, extend) {
-        var _a;
-        var 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;
-        }
-        var updated = Object.assign(Object.assign({}, eval("(" + metadataString + ")")), extend);
-        return script.replace(metadataString, JSON.stringify(updated));
-    };
-
-    var ElementContextService = /** @class */ (function () {
-        function ElementContextService() {
-        }
-        return ElementContextService;
-    }());
-    ElementContextService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementContextService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ElementContextService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementContextService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementContextService, decorators: [{
+    ConfigurationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationService, deps: [{ token: ConfigurationRuntimeService }, { token: i2__namespace$1.ContextService }, { token: i1__namespace.ConfigurationApiService }, { token: i2__namespace.MessageService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ConfigurationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationService, decorators: [{
                 type: i0.Injectable
-            }] });
+            }], ctorParameters: function () { return [{ type: ConfigurationRuntimeService }, { type: i2__namespace$1.ContextService }, { type: i1__namespace.ConfigurationApiService }, { type: i2__namespace.MessageService }]; } });
 
     var ElementRendererComponent = /** @class */ (function () {
         function ElementRendererComponent(parentInjector, dynamicModuleService, elementContext, ioProviderService, configurationService, elementRef, cdr) {
@@ -1036,9 +1187,9 @@
         };
         return ElementRendererComponent;
     }());
-    ElementRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementRendererComponent, deps: [{ token: i0__namespace.Injector, skipSelf: true }, { token: DynamicModuleService }, { token: ElementContextService }, { token: IOProviderService }, { token: ConfigurationService }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ElementRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: { meta: "meta" }, providers: [ElementContextService], viewQueries: [{ propertyName: "el", first: true, predicate: ["el"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<ng-template #el></ng-template>\n", styles: [":host{display:contents}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementRendererComponent, decorators: [{
+    ElementRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementRendererComponent, deps: [{ token: i0__namespace.Injector, skipSelf: true }, { token: DynamicModuleService }, { token: ElementContextService }, { token: IOProviderService }, { token: ConfigurationService }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ElementRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: { meta: "meta" }, providers: [ElementContextService], viewQueries: [{ propertyName: "el", first: true, predicate: ["el"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<ng-template #el></ng-template>\n", styles: [":host{display:contents}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementRendererComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'vl-cms-element-renderer',
@@ -1065,9 +1216,9 @@
         }
         return ElementChildrenComponent;
     }());
-    ElementChildrenComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementChildrenComponent, deps: [{ token: ElementContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ElementChildrenComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ElementChildrenComponent, selector: "element-children", ngImport: i0__namespace, template: "<ng-container *ngIf=\"metadata?.children.length\">\n  <ng-container *ngFor=\"let child of metadata.children\">\n    <vl-cms-element-renderer [meta]=\"child\"></vl-cms-element-renderer>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:contents}\n"], components: [{ type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementChildrenComponent, decorators: [{
+    ElementChildrenComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementChildrenComponent, deps: [{ token: ElementContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ElementChildrenComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ElementChildrenComponent, selector: "element-children", ngImport: i0__namespace, template: "<ng-container *ngIf=\"metadata?.children.length\">\n  <ng-container *ngFor=\"let child of metadata.children\">\n    <vl-cms-element-renderer [meta]=\"child\"></vl-cms-element-renderer>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:contents}\n"], components: [{ type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementChildrenComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/component-selector
@@ -1092,9 +1243,9 @@
         };
         return CustomTemplateDirective;
     }());
-    CustomTemplateDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CustomTemplateDirective, deps: [{ token: i0__namespace.TemplateRef }, { token: TemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    CustomTemplateDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: CustomTemplateDirective, selector: "[customTemplate]", inputs: { customTemplate: "customTemplate" }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CustomTemplateDirective, decorators: [{
+    CustomTemplateDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomTemplateDirective, deps: [{ token: i0__namespace.TemplateRef }, { token: TemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    CustomTemplateDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CustomTemplateDirective, selector: "[customTemplate]", inputs: { customTemplate: "customTemplate" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomTemplateDirective, decorators: [{
                 type: i0.Directive,
                 args: [{ selector: '[customTemplate]' }]
             }], ctorParameters: function () { return [{ type: i0__namespace.TemplateRef }, { type: TemplatesService }]; }, propDecorators: { customTemplate: [{
@@ -1203,15 +1354,16 @@
         });
         return ConfigurationPlugin;
     }());
-    ConfigurationPlugin.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationPlugin, deps: "invalid", target: i0__namespace.ɵɵFactoryTarget.Directive });
-    ConfigurationPlugin.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: ConfigurationPlugin, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationPlugin, decorators: [{
+    ConfigurationPlugin.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationPlugin, deps: "invalid", target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ConfigurationPlugin.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ConfigurationPlugin, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationPlugin, decorators: [{
                 type: i0.Directive
             }], ctorParameters: function () { return [{ type: undefined }]; } });
 
     var vlCmsModules = /*#__PURE__*/Object.freeze({
         __proto__: null,
         getDefaultLineItem: getDefaultLineItem,
+        ConfigurationRuntimeService: ConfigurationRuntimeService,
         ConfigurationService: ConfigurationService
     });
 
@@ -1255,7 +1407,7 @@
     var ScriptPlugin = /** @class */ (function () {
         function ScriptPlugin(host) {
             this.host = host;
-            this.document = this.host.injector.get(i6.DOCUMENT);
+            this.document = this.host.injector.get(i7.DOCUMENT);
             var elementMetadata = this.host.injector.get(ELEMENT_METADATA);
             var sharedElementMetadata = this.host.injector.get(SHARED_ELEMENT_METADATA);
             if (sharedElementMetadata === null || sharedElementMetadata === void 0 ? void 0 : sharedElementMetadata.script) {
@@ -1287,9 +1439,9 @@
         };
         return ScriptPlugin;
     }());
-    ScriptPlugin.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ScriptPlugin, deps: [{ token: exports.ElementComponent }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    ScriptPlugin.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: ScriptPlugin, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ScriptPlugin, decorators: [{
+    ScriptPlugin.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ScriptPlugin, deps: [{ token: exports.ElementComponent }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ScriptPlugin.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ScriptPlugin, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ScriptPlugin, decorators: [{
                 type: i0.Directive
             }], ctorParameters: function () { return [{ type: exports.ElementComponent }]; } });
 
@@ -1328,9 +1480,9 @@
         }
         return IOPlugin;
     }());
-    IOPlugin.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: IOPlugin, deps: [{ token: exports.ElementComponent }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    IOPlugin.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: IOPlugin, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: IOPlugin, decorators: [{
+    IOPlugin.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IOPlugin, deps: [{ token: exports.ElementComponent }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    IOPlugin.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: IOPlugin, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IOPlugin, decorators: [{
                 type: i0.Directive
             }], ctorParameters: function () { return [{ type: exports.ElementComponent }]; } });
 
@@ -1559,9 +1711,9 @@
         };
         return FederatedComponent;
     }());
-    FederatedComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: FederatedComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.Compiler }, { token: i0__namespace.ApplicationRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FederatedComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: FederatedComponent, selector: "veloce-host-federated", inputs: { remoteEntry: "remoteEntry", remoteName: "remoteName", exposedModule: "exposedModule", data: "data", eventData: "eventData" }, outputs: { integrationEvent: "integrationEvent" }, viewQueries: [{ propertyName: "federatedComponent", first: true, predicate: ["federatedComponent"], descendants: true, read: i0.ViewContainerRef }, { propertyName: "foo", first: true, predicate: ["foo"], descendants: true, read: i0.TemplateRef }, { propertyName: "moduleHostRef", first: true, predicate: ["moduleHost"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div #moduleHost></div>\n", styles: [":host{display:block}div{height:100%}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: FederatedComponent, decorators: [{
+    FederatedComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FederatedComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.Compiler }, { token: i0__namespace.ApplicationRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FederatedComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FederatedComponent, selector: "veloce-host-federated", inputs: { remoteEntry: "remoteEntry", remoteName: "remoteName", exposedModule: "exposedModule", data: "data", eventData: "eventData" }, outputs: { integrationEvent: "integrationEvent" }, viewQueries: [{ propertyName: "federatedComponent", first: true, predicate: ["federatedComponent"], descendants: true, read: i0.ViewContainerRef }, { propertyName: "foo", first: true, predicate: ["foo"], descendants: true, read: i0.TemplateRef }, { propertyName: "moduleHostRef", first: true, predicate: ["moduleHost"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div #moduleHost></div>\n", styles: [":host{display:block}div{height:100%}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FederatedComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/component-selector
@@ -1598,10 +1750,10 @@
         }
         return FederatedModule;
     }());
-    FederatedModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: FederatedModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FederatedModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: FederatedModule, declarations: [FederatedComponent], exports: [FederatedComponent] });
-    FederatedModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: FederatedModule });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: FederatedModule, decorators: [{
+    FederatedModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FederatedModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FederatedModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FederatedModule, declarations: [FederatedComponent], exports: [FederatedComponent] });
+    FederatedModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FederatedModule });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FederatedModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [FederatedComponent],
@@ -1643,7 +1795,7 @@
             }());
             DynamicModule = __decorate([
                 i0.NgModule({
-                    imports: [i6.CommonModule, angularForms.ReactiveFormsModule, FederatedModule],
+                    imports: [i7.CommonModule, angularForms.ReactiveFormsModule, FederatedModule],
                     declarations: __spreadArray(__spreadArray([], __read(staticComponents)), __read(elementsResolver.getNgComponents())),
                     jit: true,
                 })
@@ -1652,17 +1804,18 @@
         };
         return LauncherService;
     }());
-    LauncherService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LauncherService, deps: [{ token: i0__namespace.Compiler }, { token: DynamicModuleService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    LauncherService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LauncherService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LauncherService, decorators: [{
+    LauncherService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LauncherService, deps: [{ token: i0__namespace.Compiler }, { token: DynamicModuleService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    LauncherService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LauncherService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LauncherService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i0__namespace.Compiler }, { type: DynamicModuleService }]; } });
 
     var PreviewComponent = /** @class */ (function () {
-        function PreviewComponent(launcherService, configurationService, messageService) {
+        function PreviewComponent(launcherService, configurationService, messageService, runtimeService) {
             this.launcherService = launcherService;
             this.configurationService = configurationService;
             this.messageService = messageService;
+            this.runtimeService = runtimeService;
             this.state$ = new rxjs.BehaviorSubject({ loading: true, failure: false });
             this.elements = [];
             this.destroy$ = new rxjs.Subject();
@@ -1674,24 +1827,32 @@
             this.destroy$.next();
             this.destroy$.complete();
         };
-        PreviewComponent.prototype.startPreview = function () {
+        PreviewComponent.prototype.initializeConfiguration$ = function () {
             var _this = this;
             var _a;
+            var isAlreadyInitialized = this.runtimeService.isInitialized;
+            if (!this.uiDefinition || this.uiDefinition.type !== 'CONFIGURATION' || isAlreadyInitialized) {
+                return rxjs.of({});
+            }
+            if (!this.modelId) {
+                console.warn("No modelId is given for uiDefinition with '" + this.uiDefinition.type + "' type");
+                return rxjs.of({});
+            }
+            // If still not initialized - init configuration in Test mode
+            var uiDefinitionProps = (_a = this.uiDefinition.properties) !== null && _a !== void 0 ? _a : {};
+            return this.runtimeService
+                .initTestMode(this.modelId, uiDefinitionProps)
+                .pipe(rxjs.switchMap(function () { return _this.configurationService.configure(); }));
+        };
+        PreviewComponent.prototype.startPreview = function () {
+            var _this = this;
             if (!this.uiDefinition) {
                 return;
             }
-            var _b = this.uiDefinition, children = _b.children, uiDefinitionMeta = __rest(_b, ["children"]);
+            var _a = this.uiDefinition, children = _a.children, uiDefinitionMeta = __rest(_a, ["children"]);
             this.elements = children.map(function (child) { return elementToMetadata(child); });
-            var initializers = [this.launcherService.compileModule(this.elements, uiDefinitionMeta)];
-            if (this.uiDefinition.type === 'CONFIGURATION') {
-                if (!this.modelId) {
-                    console.warn("No modelId is given for uiDefinition with '" + this.uiDefinition.type + "' type");
-                    return;
-                }
-                var uiDefinitionProps = (_a = this.uiDefinition.properties) !== null && _a !== void 0 ? _a : {};
-                initializers.push(this.configurationService.init(this.modelId, uiDefinitionProps));
-            }
-            rxjs.forkJoin(initializers)
+            var compilation$ = this.launcherService.compileModule(this.elements, uiDefinitionMeta);
+            rxjs.forkJoin([compilation$, this.initializeConfiguration$()])
                 .pipe(rxjs.tap(function () { return _this.state$.next({ loading: false, failure: false }); }), rxjs.catchError(function (error) {
                 _this.messageService.add({
                     severity: 'error',
@@ -1704,18 +1865,18 @@
         };
         return PreviewComponent;
     }());
-    PreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: PreviewComponent, deps: [{ token: LauncherService }, { token: ConfigurationService }, { token: i3__namespace.MessageService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    PreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: PreviewComponent, selector: "vl-cms-preview", inputs: { modelId: "modelId", uiDefinition: "uiDefinition" }, providers: [IOProviderService, ConfigurationService, TemplatesService], ngImport: i0__namespace, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-element-renderer *ngFor=\"let el of elements\" [meta]=\"el\"></vl-cms-element-renderer>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;height:100%}\n"], components: [{ type: i4__namespace.LoaderComponent, selector: "vl-loader", inputs: ["label"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: PreviewComponent, decorators: [{
+    PreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewComponent, deps: [{ token: LauncherService }, { token: ConfigurationService }, { token: i2__namespace.MessageService }, { token: ConfigurationRuntimeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PreviewComponent, selector: "vl-cms-preview", inputs: { modelId: "modelId", uiDefinition: "uiDefinition" }, providers: [IOProviderService, TemplatesService], ngImport: i0__namespace, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-element-renderer *ngFor=\"let el of elements\" [meta]=\"el\"></vl-cms-element-renderer>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;height:100%}\n"], components: [{ type: i5__namespace.LoaderComponent, selector: "vl-loader", inputs: ["label"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i7__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'vl-cms-preview',
                         templateUrl: './preview.component.html',
                         styleUrls: ['./preview.component.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [IOProviderService, ConfigurationService, TemplatesService],
+                        providers: [IOProviderService, TemplatesService],
                     }]
-            }], ctorParameters: function () { return [{ type: LauncherService }, { type: ConfigurationService }, { type: i3__namespace.MessageService }]; }, propDecorators: { modelId: [{
+            }], ctorParameters: function () { return [{ type: LauncherService }, { type: ConfigurationService }, { type: i2__namespace.MessageService }, { type: ConfigurationRuntimeService }]; }, propDecorators: { modelId: [{
                     type: i0.Input
                 }], uiDefinition: [{
                     type: i0.Input
@@ -1726,10 +1887,10 @@
         }
         return ElementRendererModule;
     }());
-    ElementRendererModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementRendererModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    ElementRendererModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementRendererModule, declarations: [ElementRendererComponent], exports: [ElementRendererComponent] });
-    ElementRendererModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementRendererModule });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementRendererModule, decorators: [{
+    ElementRendererModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementRendererModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    ElementRendererModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementRendererModule, declarations: [ElementRendererComponent], exports: [ElementRendererComponent] });
+    ElementRendererModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementRendererModule });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementRendererModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [ElementRendererComponent],
@@ -1742,10 +1903,10 @@
         }
         return ElementChildrenModule;
     }());
-    ElementChildrenModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementChildrenModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    ElementChildrenModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementChildrenModule, declarations: [ElementChildrenComponent], imports: [ElementRendererModule], exports: [ElementChildrenComponent] });
-    ElementChildrenModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementChildrenModule, imports: [[ElementRendererModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementChildrenModule, decorators: [{
+    ElementChildrenModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementChildrenModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    ElementChildrenModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementChildrenModule, declarations: [ElementChildrenComponent], imports: [ElementRendererModule], exports: [ElementChildrenComponent] });
+    ElementChildrenModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementChildrenModule, imports: [[ElementRendererModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementChildrenModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [ElementChildrenComponent],
@@ -1759,14 +1920,14 @@
         }
         return PreviewModule;
     }());
-    PreviewModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: PreviewModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    PreviewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: PreviewModule, declarations: [PreviewComponent], imports: [i6.CommonModule, i4.LoaderModule, ElementRendererModule, ElementChildrenModule], exports: [PreviewComponent] });
-    PreviewModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: PreviewModule, imports: [[i6.CommonModule, i4.LoaderModule, ElementRendererModule, ElementChildrenModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: PreviewModule, decorators: [{
+    PreviewModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    PreviewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewModule, declarations: [PreviewComponent], imports: [i7.CommonModule, i5.LoaderModule, ElementRendererModule, ElementChildrenModule], exports: [PreviewComponent] });
+    PreviewModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewModule, imports: [[i7.CommonModule, i5.LoaderModule, ElementRendererModule, ElementChildrenModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [PreviewComponent],
-                        imports: [i6.CommonModule, i4.LoaderModule, ElementRendererModule, ElementChildrenModule],
+                        imports: [i7.CommonModule, i5.LoaderModule, ElementRendererModule, ElementChildrenModule],
                         exports: [PreviewComponent],
                     }]
             }] });
@@ -1782,13 +1943,29 @@
         }
         return ConfigurationModule;
     }());
-    ConfigurationModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    ConfigurationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationModule });
-    ConfigurationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationModule, providers: [i2.ContextService, i1.ContextApiService, i1.ProductModelApiService, i1.ConfigurationApiService] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationModule, decorators: [{
+    ConfigurationModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    ConfigurationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationModule });
+    ConfigurationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationModule, providers: [
+            i2.ContextService,
+            i1.ContextApiService,
+            i1.ProductModelApiService,
+            i1.ConfigurationApiService,
+            ConfigurationRuntimeService,
+            RuntimeContextService,
+            ConfigurationService,
+        ] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfigurationModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        providers: [i2.ContextService, i1.ContextApiService, i1.ProductModelApiService, i1.ConfigurationApiService],
+                        providers: [
+                            i2.ContextService,
+                            i1.ContextApiService,
+                            i1.ProductModelApiService,
+                            i1.ConfigurationApiService,
+                            ConfigurationRuntimeService,
+                            RuntimeContextService,
+                            ConfigurationService,
+                        ],
                     }]
             }] });
 
@@ -1797,13 +1974,13 @@
         }
         return LauncherModule;
     }());
-    LauncherModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LauncherModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    LauncherModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LauncherModule, imports: [i6.CommonModule, core.CoreModule, ConfigurationModule] });
-    LauncherModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LauncherModule, providers: [LauncherService, DynamicModuleService, i1.SalesforceApiService, i1.QuoteApiService], imports: [[i6.CommonModule, core.CoreModule, ConfigurationModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LauncherModule, decorators: [{
+    LauncherModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LauncherModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    LauncherModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LauncherModule, imports: [i7.CommonModule, core.CoreModule, ConfigurationModule] });
+    LauncherModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LauncherModule, providers: [LauncherService, DynamicModuleService, i1.SalesforceApiService, i1.QuoteApiService], imports: [[i7.CommonModule, core.CoreModule, ConfigurationModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LauncherModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i6.CommonModule, core.CoreModule, ConfigurationModule],
+                        imports: [i7.CommonModule, core.CoreModule, ConfigurationModule],
                         providers: [LauncherService, DynamicModuleService, i1.SalesforceApiService, i1.QuoteApiService],
                     }]
             }] });
@@ -1812,6 +1989,7 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.ConfigurationRuntimeService = ConfigurationRuntimeService;
     exports.ConfigurationService = ConfigurationService;
     exports.DEFAULT_PLUGINS_TOKEN = DEFAULT_PLUGINS_TOKEN;
     exports.ELEMENT_CONFIG = ELEMENT_CONFIG;