@veloceapps/sdk 2.0.8 → 2.0.10

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('@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';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common'), require('@veloce/core'), require('@angular/forms'), 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', '@veloce/core', '@angular/forms', '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["@veloce/core"], global.ng.forms, 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, core, angularForms, lodash, i2, rxjsOperators, i1, i2$1, standalone, i5) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -356,6 +356,7 @@
     var ELEMENT_METADATA = new i0.InjectionToken('ELEMENT_METADATA_TOKEN');
     var SHARED_ELEMENT_METADATA = new i0.InjectionToken('SHARED_ELEMENT_METADATA_TOKEN');
     var ELEMENT_CONFIG = new i0.InjectionToken('ELEMENT_CONFIG_TOKEN');
+    var VENDOR_MAP = new i0.InjectionToken('VENDOR_MAP');
 
     var vlInjectionTokens = /*#__PURE__*/Object.freeze({
         __proto__: null,
@@ -363,7 +364,8 @@
         UI_DEFINITION_METADATA: UI_DEFINITION_METADATA,
         ELEMENT_METADATA: ELEMENT_METADATA,
         SHARED_ELEMENT_METADATA: SHARED_ELEMENT_METADATA,
-        ELEMENT_CONFIG: ELEMENT_CONFIG
+        ELEMENT_CONFIG: ELEMENT_CONFIG,
+        VENDOR_MAP: VENDOR_MAP
     });
 
     var Entity = /** @class */ (function () {
@@ -613,25 +615,75 @@
                 type: i0.Directive
             }], ctorParameters: function () { return [{ type: exports.ElementComponent }]; } });
 
+    var normalizeImports = function (script) {
+        var 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');
+        var result = script.replace(regexp, function (match, g1, g2, src) { return "const " + g1 + " = vendor['" + src + "'];"; });
+        return result;
+    };
+    var ScriptPlugin = /** @class */ (function () {
+        function ScriptPlugin(host) {
+            this.host = host;
+            this.document = this.host.injector.get(i7.DOCUMENT);
+            this.vendorMap = this.host.injector.get(VENDOR_MAP);
+            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) {
+                this.addScript(sharedElementMetadata.script);
+            }
+            if (elementMetadata.script) {
+                this.addScript(elementMetadata.script);
+            }
+        }
+        ScriptPlugin.prototype.addScript = function (scriptStr) {
+            var id = btoa(core.UUID.UUID());
+            var script = this.document.createElement('script');
+            script.type = "text/javascript";
+            var scriptContent = normalizeImports(scriptStr);
+            var classMatch = /export class (\S+)/.exec(scriptContent);
+            var 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 + "\n        return " + className + "; };";
+            this.document.body.appendChild(script);
+            var ScriptClass = window[id](this.vendorMap);
+            if (ScriptClass instanceof Object) {
+                this.host.registerPlugin(new ScriptClass(this.host));
+            }
+            this.document.body.removeChild(script);
+        };
+        return ScriptPlugin;
+    }());
+    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 }]; } });
+
+    /*
+     * ScriptPlugin must always be the last plugin in the list to make sure user code is running after all pre-initializers.
+     */
     var CONFIG = {
         CUSTOM: {
             component: exports.ElementComponent,
-            plugins: [IOPlugin],
+            plugins: [IOPlugin, ScriptPlugin],
         },
         CONTAINER: {
             component: exports.ElementComponent,
             defaultTemplate: '<element-children></element-children>',
-            plugins: [],
+            plugins: [ScriptPlugin],
         },
         SERVICE: {
             component: exports.ElementComponent,
-            plugins: [IOPlugin],
+            plugins: [IOPlugin, ScriptPlugin],
             suppressTemplate: true,
             suppressStyles: true,
         },
         REFERENCE: {
             component: exports.ElementComponent,
-            plugins: [IOPlugin],
+            plugins: [IOPlugin, ScriptPlugin],
             suppressTemplate: true,
         },
     };
@@ -661,16 +713,17 @@
             reference: metadata.reference,
             inputs: metadata.inputs,
             outputs: metadata.outputs,
-            children: metadata.children.map(function (_c) {
-                var name = _c.name;
+            children: metadata.children.map(function (_e) {
+                var name = _e.name;
                 return name;
             }),
         };
+        var normalizedElMetadata = normalizeElementMetadata(elMetadata);
         if (!metadata.script || !EXPORTED_CLASS_REGEX.test(metadata.script)) {
             throw new Error("'" + metadata.name + "' element script doesn't have exported class");
         }
         var script = metadata.script &&
-            window.btoa(metadata.script.replace(EXPORTED_CLASS_REGEX, "@ElementDefinition(" + JSON.stringify(elMetadata) + ") export class Script"));
+            window.btoa(metadata.script.replace(EXPORTED_CLASS_REGEX, "@ElementDefinition(" + stringifyElementMetadata(normalizedElMetadata) + ")\nexport class Script"));
         var template = metadata.template && window.btoa(metadata.template);
         var styles = metadata.styles && window.btoa(metadata.styles);
         return {
@@ -680,6 +733,60 @@
             children: metadata.children.map(function (meta) { return metadataToElement(meta); }),
         };
     };
+    var normalizeElementMetadata = function (elementMetadata) {
+        var _a, _b, _c, _d;
+        var metadata = Object.assign({}, elementMetadata);
+        // model
+        var _e = (_a = metadata.model) !== null && _a !== void 0 ? _a : {}, lineItem = _e.lineItem, path = _e.path;
+        var model = lineItem ? { lineItem: lineItem } : path ? { 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
+        var inputs = Object.entries((_b = metadata.inputs) !== null && _b !== void 0 ? _b : {}).reduce(function (acc, _e) {
+            var _f;
+            var _g = __read(_e, 2), key = _g[0], value = _g[1];
+            return Object.assign(Object.assign({}, acc), (_f = {}, _f[key] = value || null, _f));
+        }, {});
+        if (inputs && Object.keys(inputs).length > 0) {
+            metadata.inputs = inputs;
+        }
+        else {
+            delete metadata.inputs;
+        }
+        // outputs
+        var outputs = Object.entries((_c = metadata.outputs) !== null && _c !== void 0 ? _c : {}).reduce(function (acc, _e) {
+            var _f;
+            var _g = __read(_e, 2), key = _g[0], value = _g[1];
+            return Object.assign(Object.assign({}, acc), (_f = {}, _f[key] = value || null, _f));
+        }, {});
+        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;
+        }
+        return metadata;
+    };
     var extractElementMetadata = function (script) {
         var _a;
         var metadataString = ((_a = METADATA_DECORATOR_REGEX.exec(script)) !== null && _a !== void 0 ? _a : [])[1];
@@ -696,7 +803,7 @@
             return script;
         }
         var updated = Object.assign(Object.assign({}, eval("(" + metadataString + ")")), extend);
-        return script.replace(metadataString, JSON.stringify(updated));
+        return script.replace(metadataString, stringifyElementMetadata(updated));
     };
     var getElementConfig = function (type) {
         return CONFIG[type];
@@ -705,6 +812,12 @@
         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) {
+        var cleaned = JSON.stringify(elementMetadata, null, 2);
+        return cleaned.replace(/^[\t ]*"[^:\n\r]+(?<!\\)":/gm, function (match) {
+            return match.replace(/"/g, '');
+        });
+    }
 
     var ElementContextService = /** @class */ (function () {
         function ElementContextService() {
@@ -858,7 +971,7 @@
     var getDefaultLineItem = function (context, uiDefinitionProperties) {
         var _a, _b, _c;
         var id = core.UUID.UUID();
-        var lineItem = Object.assign({ id: id, type: (_a = uiDefinitionProperties.rootType) !== null && _a !== void 0 ? _a : '', cfgStatus: 'Default', qty: 1, productName: ((_b = context.properties) === null || _b === void 0 ? void 0 : _b.displayName) || context.productName, productId: (_c = context.productId) !== null && _c !== void 0 ? _c : '', offeringId: context.offeringId }, (context.offeringId
+        var lineItem = Object.assign({ id: id, type: (_a = uiDefinitionProperties.rootType) !== null && _a !== void 0 ? _a : '', cfgStatus: 'Default', qty: 1, productName: ((_b = context.properties) === null || _b === void 0 ? void 0 : _b.displayName) || context.productName, productId: (_c = context.productId) !== null && _c !== void 0 ? _c : '' }, (context.offeringId
             ? { offeringId: context.offeringId, offeringInstanceId: context.offeringInstanceId || id }
             : {}));
         return lineItem;
@@ -872,10 +985,10 @@
         RuntimeContextService.prototype.getRuntimeContext = function (productId, offeringId) {
             var _this = this;
             return this.configurationApiService.getRuntimeDataByProductId(productId, offeringId).pipe(rxjsOperators.map(function (runtimeData) {
-                var _a, _b;
+                var _a, _b, _c, _d;
                 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;
+                var _e = (_a = Array.from(runtimeModel.components.values()).find(function (c) { return c.productId === productId; })) !== null && _a !== void 0 ? _a : {}, productName = _e.productName, properties = _e.properties;
                 return {
                     modelId: runtimeData.modelId,
                     uiDefinition: uiDefinition,
@@ -884,8 +997,10 @@
                     productId: productId,
                     productType: (properties === null || properties === void 0 ? void 0 : properties.displayName) || productName,
                     offeringId: offeringId,
+                    priceListId: (_b = uiDefinition === null || uiDefinition === void 0 ? void 0 : uiDefinition.properties) === null || _b === void 0 ? void 0 : _b.priceList,
                     properties: {
-                        PricingEnabled: (_b = uiDefinition === null || uiDefinition === void 0 ? void 0 : uiDefinition.properties) === null || _b === void 0 ? void 0 : _b.pricingEnabled,
+                        PricingEnabled: (_c = uiDefinition === null || uiDefinition === void 0 ? void 0 : uiDefinition.properties) === null || _c === void 0 ? void 0 : _c.pricingEnabled,
+                        PriceListId: (_d = uiDefinition === null || uiDefinition === void 0 ? void 0 : uiDefinition.properties) === null || _d === void 0 ? void 0 : _d.priceList,
                     },
                 };
             }));
@@ -940,14 +1055,17 @@
                 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 = {
+                var _e = __read(_d, 2), runtimeData = _e[0], configurationContext = _e[1];
+                var _a;
+                _this._runtimeContext = {
                     modelId: modelId,
-                    runtimeModel: runtimeModel,
+                    runtimeModel: core.RuntimeModel.create(runtimeData.types, runtimeData.products),
                     runtimeMode: i2.RuntimeMode.TEST,
                 };
-                _this._runtimeContext = runtimeContext;
+                _this.contextService.update({
+                    priceListId: uiDefinitionProperties.priceList,
+                    properties: Object.assign(Object.assign(Object.assign({}, (_a = _this.runtimeContext) === null || _a === void 0 ? void 0 : _a.properties), configurationContext.properties), { ModelId: modelId, RuntimeMode: core.ConfigurationContextMode.TEST, PricingEnabled: String(uiDefinitionProperties.pricingEnabled), StartDate: new Date().toISOString().substring(0, 10), PriceListId: uiDefinitionProperties.priceList }),
+                });
                 _this._isInitialized = true;
             }));
         };
@@ -962,18 +1080,25 @@
                 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.id15to18('AccountId', mergeContext.properties);
+                _this._runtimeContext = mergeContext;
+                if (configurationContext.properties && ((_c = runtimeContext.properties) === null || _c === void 0 ? void 0 : _c.StartDate)) {
+                    _this.contextService.update({
+                        priceListId: _this.uiDefinitionProperties.priceList,
+                        properties: Object.assign(Object.assign(Object.assign({}, runtimeContext.properties), configurationContext.properties), { PricingEnabled: String(_this.uiDefinitionProperties.pricingEnabled), PriceListId: _this.uiDefinitionProperties.priceList }),
                     });
                 }
-                _this._runtimeContext = mergeContext;
                 _this._isInitialized = true;
             }));
         };
-        ConfigurationRuntimeService.prototype.patchContext = function (context, patch) {
-            lodash.merge(context, patch);
+        ConfigurationRuntimeService.prototype.id15to18 = function (propertyName, source) {
+            if (!source) {
+                return;
+            }
+            var value = source[propertyName];
+            if (typeof value === 'string' && value.length === 15) {
+                source[propertyName] = core.SalesforceIdUtils.generateId18FromId15(value);
+            }
         };
         ConfigurationRuntimeService.prototype.getAsset = function (lineItem) {
             return this._assets && this._assets.find(function (a) { return a.id === lineItem.openOrderLineItemId || a.id === lineItem.assetId; });
@@ -1105,26 +1230,6 @@
             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.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(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: uiDefinitionProperties.priceList,
-                    properties: properties,
-                };
-                this.contextService.update(ctx);
-            }
-            else {
-                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({
-                        priceListId: uiDefinitionProperties.priceList,
-                        properties: Object.assign(Object.assign(Object.assign({}, context.properties), runtimeContext.properties), { PricingEnabled: String(uiDefinitionProperties.pricingEnabled), PriceListId: uiDefinitionProperties.priceList }),
-                    });
-                }
-            }
             return {
                 lineItem: lineItem,
                 mode: this.mode,
@@ -1304,6 +1409,159 @@
                     }]
             }], ctorParameters: function () { return [{ type: ElementContextService }]; } });
 
+    var moduleMap = {};
+    function loadRemoteEntry(remoteEntry) {
+        return new Promise(function (resolve, reject) {
+            if (moduleMap[remoteEntry]) {
+                resolve();
+                return;
+            }
+            var script = document.createElement('script');
+            script.src = remoteEntry;
+            script.onerror = reject;
+            script.onload = function () {
+                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 () {
+            var container, factory, Module;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: 
+                    // Initializes the share scope. This fills it with known provided modules from this build and all remotes
+                    return [4 /*yield*/, __webpack_init_sharing__('default')];
+                    case 1:
+                        // Initializes the share scope. This fills it with known provided modules from this build and all remotes
+                        _a.sent();
+                        container = window[remoteName];
+                        // Initialize the container, it may provide shared modules
+                        return [4 /*yield*/, container.init(__webpack_share_scopes__.default)];
+                    case 2:
+                        // Initialize the container, it may provide shared modules
+                        _a.sent();
+                        return [4 /*yield*/, container.get(exposedModule)];
+                    case 3:
+                        factory = _a.sent();
+                        Module = factory();
+                        return [2 /*return*/, Module];
+                }
+            });
+        });
+    }
+    function loadRemoteModule(options) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, loadRemoteEntry(options.remoteEntry)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, lookupExposedModule(options.remoteName, options.exposedModule)];
+                    case 2: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
+    }
+
+    var IntegrationEvent;
+    (function (IntegrationEvent) {
+        IntegrationEvent["Init"] = "Init";
+    })(IntegrationEvent || (IntegrationEvent = {}));
+    var FederatedComponent = /** @class */ (function () {
+        function FederatedComponent(injector, compiler, appRef, renderer) {
+            this.injector = injector;
+            this.compiler = compiler;
+            this.appRef = appRef;
+            this.renderer = renderer;
+            this.integrationEvent = new i0.EventEmitter();
+            this.moduleReady = false;
+        }
+        FederatedComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            if (!this.remoteEntry || !this.remoteName || !this.exposedModule) {
+                return;
+            }
+            loadRemoteModule({
+                remoteEntry: this.remoteEntry,
+                remoteName: this.remoteName,
+                exposedModule: this.exposedModule,
+            }).then(function (federated) {
+                _this.compiler.compileModuleAsync(federated[_this.exposedModule]).then(function (moduleFactory) {
+                    var _a;
+                    var rootModuleRef = moduleFactory.create(_this.injector);
+                    var rootComponentFactory = rootModuleRef.componentFactoryResolver.resolveComponentFactory(federated[_this.exposedModule].rootComponent);
+                    var node = document.createElement('div');
+                    var _b = rootComponentFactory.create(_this.injector, [], node), instance = _b.instance, hostView = _b.hostView;
+                    _this.instance = instance;
+                    _this.instance.data = _this.data;
+                    _this.instance.eventData = _this.eventData;
+                    _this.instance.integrationEvent = _this.integrationEvent;
+                    _this.renderer.appendChild((_a = _this.moduleHostRef) === null || _a === void 0 ? void 0 : _a.nativeElement, node);
+                    _this.appRef.attachView(hostView);
+                });
+            });
+        };
+        FederatedComponent.prototype.ngOnChanges = function (changes) {
+            if (!this.instance) {
+                return;
+            }
+            this.instance.ngOnChanges(changes);
+        };
+        return FederatedComponent;
+    }());
+    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
+                        selector: 'veloce-host-federated',
+                        templateUrl: './federated.component.html',
+                        styleUrls: ['./federated.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.Compiler }, { type: i0__namespace.ApplicationRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { federatedComponent: [{
+                    type: i0.ViewChild,
+                    args: ['federatedComponent', { read: i0.ViewContainerRef }]
+                }], foo: [{
+                    type: i0.ViewChild,
+                    args: ['foo', { read: i0.TemplateRef }]
+                }], moduleHostRef: [{
+                    type: i0.ViewChild,
+                    args: ['moduleHost', { static: false }]
+                }], remoteEntry: [{
+                    type: i0.Input
+                }], remoteName: [{
+                    type: i0.Input
+                }], exposedModule: [{
+                    type: i0.Input
+                }], data: [{
+                    type: i0.Input
+                }], eventData: [{
+                    type: i0.Input
+                }], integrationEvent: [{
+                    type: i0.Output
+                }] } });
+
+    var FederatedModule = /** @class */ (function () {
+        function FederatedModule() {
+        }
+        return FederatedModule;
+    }());
+    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],
+                        exports: [FederatedComponent],
+                    }]
+            }] });
+
     // eslint-disable-next-line @angular-eslint/directive-selector
     var CustomTemplateDirective = /** @class */ (function () {
         function CustomTemplateDirective(templateRef, templatesService) {
@@ -1329,14 +1587,12 @@
 
     var ConfigurationPlugin = /** @class */ (function () {
         function ConfigurationPlugin(host) {
+            var _this = this;
+            var _a, _b;
             this.host = host;
             this.destroy$ = new rxjs.Subject();
             this.elementMetadata = this.host.injector.get(ELEMENT_METADATA);
             this.configurationService = this.host.injector.get(ConfigurationService);
-        }
-        ConfigurationPlugin.prototype.ngOnInit = function () {
-            var _this = this;
-            var _a, _b;
             if ((_a = this.elementMetadata.model) === null || _a === void 0 ? void 0 : _a.lineItem) {
                 this.host.model$.pipe(rxjs.takeUntil(this.destroy$)).subscribe(function (model) { return (_this.modelSnapshot = model); });
                 var pathBlocks = parseBoundPath((_b = this.elementMetadata.model) === null || _b === void 0 ? void 0 : _b.lineItem);
@@ -1344,7 +1600,7 @@
                 this.host.boundName = name !== null && name !== void 0 ? name : type;
                 this.register(type, property, name);
             }
-        };
+        }
         ConfigurationPlugin.prototype.ngOnDestroy = function () {
             this.destroy$.next();
             this.destroy$.complete();
@@ -1435,6 +1691,11 @@
                 type: i0.Directive
             }], ctorParameters: function () { return [{ type: undefined }]; } });
 
+    var DEFAULT_PLUGINS = {
+        CONFIGURATION: [ConfigurationPlugin],
+        DEFAULT: [],
+    };
+
     var vlCmsModules = /*#__PURE__*/Object.freeze({
         __proto__: null,
         getDefaultLineItem: getDefaultLineItem,
@@ -1446,10 +1707,12 @@
         __proto__: null,
         elementToMetadata: elementToMetadata,
         metadataToElement: metadataToElement,
+        normalizeElementMetadata: normalizeElementMetadata,
         extractElementMetadata: extractElementMetadata,
         extendElementMetadata: extendElementMetadata,
         getElementConfig: getElementConfig,
         doesElementSupportIO: doesElementSupportIO,
+        stringifyElementMetadata: stringifyElementMetadata,
         parseBoundPath: parseBoundPath,
         findLineItem: findLineItem,
         insertLineItem: insertLineItem,
@@ -1468,7 +1731,7 @@
         '@veloce/sdk/cms': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, vlCmsModules), vlCmsUtils), vlCmsLineItemTypes), vlInjectionTokens), { TemplatesService: TemplatesService }),
         '@veloce/api': {
             SalesforceApiService: i1.SalesforceApiService,
-            QuoteApiService: i1.QuoteApiService
+            QuoteApiService: i1.QuoteApiService,
         },
         '@angular/core': i0__namespace,
         '@angular/forms': angularForms__namespace,
@@ -1476,56 +1739,6 @@
         'rxjs/operators': rxjsOperators__namespace,
         lodash: lodash__namespace,
     };
-    var normalizeImports = function (script) {
-        var 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');
-        var result = script.replace(regexp, function (match, g1, g2, src) { return "const " + g1 + " = vendor['" + src + "'];"; });
-        return result;
-    };
-    var ScriptPlugin = /** @class */ (function () {
-        function ScriptPlugin(host) {
-            this.host = host;
-            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) {
-                this.addScript(sharedElementMetadata.script);
-            }
-            if (elementMetadata.script) {
-                this.addScript(elementMetadata.script);
-            }
-        }
-        ScriptPlugin.prototype.addScript = function (scriptStr) {
-            var id = btoa(core.UUID.UUID());
-            var script = this.document.createElement('script');
-            script.type = "text/javascript";
-            var scriptContent = normalizeImports(scriptStr);
-            var classMatch = /export class (\S+)/.exec(scriptContent);
-            var 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 + "\n        return " + className + "; };";
-            this.document.body.appendChild(script);
-            var ScriptClass = window[id](vendorMap);
-            if (ScriptClass instanceof Object) {
-                this.host.registerPlugin(new ScriptClass(this.host));
-            }
-            this.document.body.removeChild(script);
-        };
-        return ScriptPlugin;
-    }());
-    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 }]; } });
-
-    var DEFAULT_PLUGINS = {
-        CONFIGURATION: [ScriptPlugin, ConfigurationPlugin],
-        DEFAULT: [ScriptPlugin],
-    };
 
     var ElementsResolver = /** @class */ (function () {
         function ElementsResolver(uiDef, elements) {
@@ -1628,6 +1841,7 @@
                     { provide: ELEMENT_METADATA, useValue: element },
                     { provide: SHARED_ELEMENT_METADATA, useValue: this.getSharedElement(sourceElement) },
                     { provide: ELEMENT_CONFIG, useValue: config },
+                    { provide: VENDOR_MAP, useValue: vendorMap },
                 ] });
             var cmp = i0.Component(component)(/** @class */ (function (_super) {
                 __extends(C, _super);
@@ -1646,159 +1860,6 @@
         return ElementsResolver;
     }());
 
-    var moduleMap = {};
-    function loadRemoteEntry(remoteEntry) {
-        return new Promise(function (resolve, reject) {
-            if (moduleMap[remoteEntry]) {
-                resolve();
-                return;
-            }
-            var script = document.createElement('script');
-            script.src = remoteEntry;
-            script.onerror = reject;
-            script.onload = function () {
-                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 () {
-            var container, factory, Module;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: 
-                    // Initializes the share scope. This fills it with known provided modules from this build and all remotes
-                    return [4 /*yield*/, __webpack_init_sharing__('default')];
-                    case 1:
-                        // Initializes the share scope. This fills it with known provided modules from this build and all remotes
-                        _a.sent();
-                        container = window[remoteName];
-                        // Initialize the container, it may provide shared modules
-                        return [4 /*yield*/, container.init(__webpack_share_scopes__.default)];
-                    case 2:
-                        // Initialize the container, it may provide shared modules
-                        _a.sent();
-                        return [4 /*yield*/, container.get(exposedModule)];
-                    case 3:
-                        factory = _a.sent();
-                        Module = factory();
-                        return [2 /*return*/, Module];
-                }
-            });
-        });
-    }
-    function loadRemoteModule(options) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, loadRemoteEntry(options.remoteEntry)];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, lookupExposedModule(options.remoteName, options.exposedModule)];
-                    case 2: return [2 /*return*/, _a.sent()];
-                }
-            });
-        });
-    }
-
-    var IntegrationEvent;
-    (function (IntegrationEvent) {
-        IntegrationEvent["Init"] = "Init";
-    })(IntegrationEvent || (IntegrationEvent = {}));
-    var FederatedComponent = /** @class */ (function () {
-        function FederatedComponent(injector, compiler, appRef, renderer) {
-            this.injector = injector;
-            this.compiler = compiler;
-            this.appRef = appRef;
-            this.renderer = renderer;
-            this.integrationEvent = new i0.EventEmitter();
-            this.moduleReady = false;
-        }
-        FederatedComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            if (!this.remoteEntry || !this.remoteName || !this.exposedModule) {
-                return;
-            }
-            loadRemoteModule({
-                remoteEntry: this.remoteEntry,
-                remoteName: this.remoteName,
-                exposedModule: this.exposedModule,
-            }).then(function (federated) {
-                _this.compiler.compileModuleAsync(federated[_this.exposedModule]).then(function (moduleFactory) {
-                    var _a;
-                    var rootModuleRef = moduleFactory.create(_this.injector);
-                    var rootComponentFactory = rootModuleRef.componentFactoryResolver.resolveComponentFactory(federated[_this.exposedModule].rootComponent);
-                    var node = document.createElement('div');
-                    var _b = rootComponentFactory.create(_this.injector, [], node), instance = _b.instance, hostView = _b.hostView;
-                    _this.instance = instance;
-                    _this.instance.data = _this.data;
-                    _this.instance.eventData = _this.eventData;
-                    _this.instance.integrationEvent = _this.integrationEvent;
-                    _this.renderer.appendChild((_a = _this.moduleHostRef) === null || _a === void 0 ? void 0 : _a.nativeElement, node);
-                    _this.appRef.attachView(hostView);
-                });
-            });
-        };
-        FederatedComponent.prototype.ngOnChanges = function (changes) {
-            if (!this.instance) {
-                return;
-            }
-            this.instance.ngOnChanges(changes);
-        };
-        return FederatedComponent;
-    }());
-    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
-                        selector: 'veloce-host-federated',
-                        templateUrl: './federated.component.html',
-                        styleUrls: ['./federated.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.Compiler }, { type: i0__namespace.ApplicationRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { federatedComponent: [{
-                    type: i0.ViewChild,
-                    args: ['federatedComponent', { read: i0.ViewContainerRef }]
-                }], foo: [{
-                    type: i0.ViewChild,
-                    args: ['foo', { read: i0.TemplateRef }]
-                }], moduleHostRef: [{
-                    type: i0.ViewChild,
-                    args: ['moduleHost', { static: false }]
-                }], remoteEntry: [{
-                    type: i0.Input
-                }], remoteName: [{
-                    type: i0.Input
-                }], exposedModule: [{
-                    type: i0.Input
-                }], data: [{
-                    type: i0.Input
-                }], eventData: [{
-                    type: i0.Input
-                }], integrationEvent: [{
-                    type: i0.Output
-                }] } });
-
-    var FederatedModule = /** @class */ (function () {
-        function FederatedModule() {
-        }
-        return FederatedModule;
-    }());
-    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],
-                        exports: [FederatedComponent],
-                    }]
-            }] });
-
     var LauncherService = /** @class */ (function () {
         function LauncherService(compiler, dynamicModuleService) {
             this.compiler = compiler;
@@ -2052,6 +2113,7 @@
     exports.SHARED_ELEMENT_METADATA = SHARED_ELEMENT_METADATA;
     exports.TemplatesService = TemplatesService;
     exports.UI_DEFINITION_METADATA = UI_DEFINITION_METADATA;
+    exports.VENDOR_MAP = VENDOR_MAP;
     exports.doesElementSupportIO = doesElementSupportIO;
     exports.elementToMetadata = elementToMetadata;
     exports.extendElementMetadata = extendElementMetadata;
@@ -2066,10 +2128,12 @@
     exports.insertLineItem = insertLineItem;
     exports.mapAttributes = mapAttributes;
     exports.metadataToElement = metadataToElement;
+    exports.normalizeElementMetadata = normalizeElementMetadata;
     exports.parseBoundPath = parseBoundPath;
     exports.patchAttributes = patchAttributes;
     exports.removeLineItem = removeLineItem;
     exports.replaceLineItem = replaceLineItem;
+    exports.stringifyElementMetadata = stringifyElementMetadata;
     exports.upsertAttributes = upsertAttributes;
 
     Object.defineProperty(exports, '__esModule', { value: true });