@veloceapps/sdk 5.0.9 → 5.0.11

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

@@ -1033,16 +1033,37 @@
                 _this.processChildren(children);
             });
         };
+        ElementRendererComponent.prototype.getModelComponent = function () {
+            var component = null;
+            var injector = this.parentInjector;
+            while (!component) {
+                var parentComp = injector.get(ElementRendererComponent, null);
+                if (parentComp === null || parentComp === void 0 ? void 0 : parentComp.meta.model) {
+                    component = parentComp;
+                    break;
+                }
+                if (parentComp) {
+                    injector = parentComp.parentInjector;
+                }
+                else {
+                    break;
+                }
+            }
+            return component;
+        };
         ElementRendererComponent.prototype.createFromLineItem = function (path) {
             var _this = this;
             var _a, _b;
-            var parentComp = this.parentInjector.get(ElementRendererComponent, null);
+            var parentComp = this.getModelComponent();
             var parentPath = (_a = parentComp === null || parentComp === void 0 ? void 0 : parentComp.meta.model) === null || _a === void 0 ? void 0 : _a.lineItem;
             var pathBlocks = parseBoundPath(path).reverse();
             var _c = (_b = pathBlocks[1]) !== null && _b !== void 0 ? _b : {}, property = _c.property, name = _c.name;
             var finalPath = pathBlocks[0];
             var children$ = this.getParentLineItem$(parentComp).pipe(rxjs.map(function (model) {
                 var _a;
+                if (!model) {
+                    return [];
+                }
                 if (property === 'ports' && !finalPath.property && parentPath !== path) {
                     return (_a = model.lineItems.filter(function (_c) {
                         var port = _c.port;
@@ -1519,30 +1540,14 @@
 
     var ElementsResolver = /** @class */ (function () {
         function ElementsResolver(uiDef, elements) {
-            var e_1, _c;
+            var _this = this;
             this.uiDef = uiDef;
             this.renderableElements = [];
             this.sharedElements = [];
-            this.elements = this.transpileScripts(elements);
-            var flatElements = this.flattenElements(this.elements);
-            try {
-                for (var flatElements_1 = __values(flatElements), flatElements_1_1 = flatElements_1.next(); !flatElements_1_1.done; flatElements_1_1 = flatElements_1.next()) {
-                    var el = flatElements_1_1.value;
-                    if (this.isSharedElement(el)) {
-                        this.sharedElements.push(el);
-                    }
-                    else {
-                        this.renderableElements.push(el);
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (flatElements_1_1 && !flatElements_1_1.done && (_c = flatElements_1.return)) _c.call(flatElements_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
+            var transpiledElements = this.transpileScripts(elements);
+            this.sharedElements = this.flattenElements(transpiledElements).filter(function (el) { return _this.isSharedElement(el); });
+            this.elements = transpiledElements.map(function (el) { return _this.processElementMetadata(el); }).filter(Boolean);
+            this.renderableElements = this.getRenderableElements(this.elements);
         }
         ElementsResolver.prototype.getNgComponents = function () {
             var _this = this;
@@ -1571,8 +1576,31 @@
         ElementsResolver.prototype.isSharedElement = function (el) {
             return Boolean(el.isShared) && el.type !== 'REFERENCE';
         };
+        ElementsResolver.prototype.getRenderableElements = function (elements) {
+            var e_1, _c;
+            var _this = this;
+            var renderable = [];
+            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 (!this.isSharedElement(el)) {
+                        var children = el.children.filter(function (child) { return !_this.isSharedElement(child); });
+                        var renderableChildren = this.getRenderableElements(children);
+                        renderable.push.apply(renderable, __spreadArray([Object.assign(Object.assign({}, el), { children: children })], __read(renderableChildren)));
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (elements_1_1 && !elements_1_1.done && (_c = elements_1.return)) _c.call(elements_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return renderable;
+        };
         ElementsResolver.prototype.getSharedElement = function (element) {
-            if (element.type !== 'REFERENCE') {
+            if (!element.reference) {
                 return;
             }
             return this.sharedElements.find(function (el) { return element.reference === el.name; });
@@ -1588,45 +1616,52 @@
             return !config.suppressStyles ? (_a = element.styles) !== null && _a !== void 0 ? _a : '' : '';
         };
         ElementsResolver.prototype.processElementMetadata = function (sourceElement) {
+            var _this = this;
             var _a, _b;
-            var sharedElement = this.getSharedElement(sourceElement);
             var finalElement;
             if (sourceElement.type === 'REFERENCE') {
+                var sharedElement = this.getSharedElement(sourceElement);
                 if (!sharedElement) {
                     console.warn("Shared element \"" + sourceElement.reference + "\" not found");
                     return;
                 }
-                finalElement = Object.assign(Object.assign({}, sourceElement), { type: sharedElement.type, template: sharedElement.template, styles: ((_a = sharedElement.styles) !== null && _a !== void 0 ? _a : '') + '\n' + ((_b = sourceElement.styles) !== null && _b !== void 0 ? _b : ''), inputs: Object.assign(Object.assign({}, sharedElement.inputs), sourceElement.inputs), outputs: Object.assign(Object.assign({}, sharedElement.outputs), sourceElement.outputs) });
+                finalElement = Object.assign(Object.assign({}, sourceElement), { children: this.getSharedChildren(sharedElement.children, sourceElement.path), type: sharedElement.type, template: sharedElement.template, styles: ((_a = sharedElement.styles) !== null && _a !== void 0 ? _a : '') + '\n' + ((_b = sourceElement.styles) !== null && _b !== void 0 ? _b : ''), inputs: Object.assign(Object.assign({}, sharedElement.inputs), sourceElement.inputs), outputs: Object.assign(Object.assign({}, sharedElement.outputs), sourceElement.outputs) });
             }
             else {
                 finalElement = sourceElement;
+                delete sourceElement.reference;
             }
             finalElement.template = this.resolveElementTemplate(finalElement);
             finalElement.styles = this.resolveElementStyles(finalElement);
-            return finalElement;
+            return Object.assign(Object.assign({}, finalElement), { children: finalElement.children
+                    .map(function (child) { return _this.processElementMetadata(child); })
+                    .filter(Boolean) });
+        };
+        ElementsResolver.prototype.getSharedChildren = function (children, parentPath) {
+            var _this = this;
+            return children.map(function (c) {
+                if (!c.path) {
+                    return c;
+                }
+                var _c = __read(c.path.split('/').reverse(), 1), elName = _c[0];
+                var path = parentPath + '/' + elName;
+                return Object.assign(Object.assign({}, c), { path: path, children: _this.getSharedChildren(c.children, path) });
+            });
         };
-        ElementsResolver.prototype.resolveElement = function (sourceElement) {
+        ElementsResolver.prototype.resolveElement = function (element) {
             var _a;
-            var element = this.processElementMetadata(sourceElement);
-            if (!element) {
-                return;
-            }
             var config = CONFIG[element.type];
             var defaultPlugins = (_a = DEFAULT_PLUGINS[this.uiDef.type]) !== null && _a !== void 0 ? _a : [];
             if (!config) {
                 console.warn("Unknown element type \"" + element.type + "\"");
                 return;
             }
-            var configuredStyles = this.convertInlineStylesToCSS(element.configuredStyles);
-            if (configuredStyles) {
-                // order is important: styles written by user in CSS code should has higher priority
-                element.styles = configuredStyles + element.styles;
-            }
-            var component = Object.assign(Object.assign({ selector: 'vl-element', template: element.template }, (element.styles ? { styles: [element.styles] } : {})), { providers: [
+            var styles = this.getElementStyles(element);
+            var component = Object.assign(Object.assign({ selector: 'vl-element', template: element.template }, (styles ? { styles: [styles] } : {})), { providers: [
                     { provide: DEFAULT_PLUGINS_TOKEN, useValue: defaultPlugins },
                     { provide: UI_DEFINITION_METADATA, useValue: this.uiDef },
                     { provide: ELEMENT_METADATA, useValue: element },
-                    { provide: SHARED_ELEMENT_METADATA, useValue: this.getSharedElement(sourceElement) },
+                    { provide: SHARED_ELEMENT_METADATA, useValue: this.getSharedElement(element) },
                     { provide: ELEMENT_CONFIG, useValue: config },
                     { provide: VENDOR_MAP, useValue: vendorMap },
                 ] });
@@ -1640,17 +1675,29 @@
             lodash.set(cmp, 'path', element.path);
             return cmp;
         };
+        ElementsResolver.prototype.getElementStyles = function (element) {
+            var result = '';
+            var configuredStyles = this.convertInlineStylesToCSS(element.configuredStyles);
+            if (configuredStyles) {
+                // order is important: styles written by user in CSS code should has higher priority
+                result += configuredStyles;
+            }
+            if (element.styles) {
+                result += element.styles;
+            }
+            return result || undefined;
+        };
         ElementsResolver.prototype.convertInlineStylesToCSS = function (styles) {
             if (!styles) {
                 return '';
             }
             var entries = Object.entries(styles);
-            var result = ':host {';
+            var result = ':host {\n';
             entries.forEach(function (_c) {
                 var _d = __read(_c, 2), style = _d[0], value = _d[1];
-                result += lodash.kebabCase(style) + ":" + value + ";";
+                result += "  " + lodash.kebabCase(style) + ":" + value + ";\n";
             });
-            result += '}';
+            result += '}\n';
             return result;
         };
         return ElementsResolver;
@@ -1661,13 +1708,15 @@
             this.compiler = compiler;
             this.dynamicModuleService = dynamicModuleService;
         }
-        LauncherService.prototype.compileModule = function (elements, uiDefs) {
+        LauncherService.prototype.compileModule = function (uiDef, elements) {
             var _this = this;
-            this.module = this.getModule(elements, uiDefs);
+            var elementsResolver = new ElementsResolver(uiDef, elements);
+            this.dynamicModuleService.elementsTree = elementsResolver.elements;
+            this.module = this.getModule(elementsResolver.getNgComponents());
             return rxjs.from(this.compiler.compileModuleAndAllComponentsAsync(this.module)).pipe(rxjs.tap(function (m) {
                 _this.dynamicModuleService.componentFactories = m.componentFactories;
                 _this.moduleInstance = m;
-            }));
+            }), rxjs.map(function (m) { return ({ module: m, elements: elementsResolver.elements }); }));
         };
         LauncherService.prototype.destroy = function () {
             if (this.moduleInstance) {
@@ -1679,10 +1728,8 @@
                 this.module = undefined;
             }
         };
-        LauncherService.prototype.getModule = function (elements, uiDef) {
+        LauncherService.prototype.getModule = function (components) {
             var staticComponents = [ElementChildrenComponent, ElementRendererComponent, CustomTemplateDirective];
-            var elementsResolver = new ElementsResolver(uiDef, elements);
-            this.dynamicModuleService.elementsTree = elementsResolver.elements;
             var DynamicModule = /** @class */ (function () {
                 function DynamicModule() {
                 }
@@ -1691,7 +1738,7 @@
             DynamicModule = __decorate([
                 i0.NgModule({
                     imports: [i7.CommonModule, angularForms.FormsModule, angularForms.ReactiveFormsModule, FederatedModule, dragDrop.DragDropModule],
-                    declarations: __spreadArray(__spreadArray([], __read(staticComponents)), __read(elementsResolver.getNgComponents())),
+                    declarations: __spreadArray(__spreadArray([], __read(staticComponents)), __read(components)),
                     jit: true,
                 })
             ], DynamicModule);
@@ -1762,10 +1809,14 @@
                 return;
             }
             var _a = this.uiDefinition, children = _a.children, uiDefinitionMeta = __rest(_a, ["children"]);
-            this.elements = this.elementToMetadataSafe(children);
-            var compilation$ = this.launcherService.compileModule(this.elements, uiDefinitionMeta);
+            var elements = this.elementToMetadataSafe(children);
+            var compilation$ = this.launcherService.compileModule(uiDefinitionMeta, elements);
             rxjs.forkJoin([compilation$, this.initializeConfiguration$()])
-                .pipe(rxjs.tap(function () { return _this.state$.next({ loading: false, failure: false }); }), rxjs.catchError(function (error) {
+                .pipe(rxjs.tap(function (_c) {
+                var _d = __read(_c, 1), result = _d[0];
+                _this.elements = result.elements;
+                _this.state$.next({ loading: false, failure: false });
+            }), rxjs.catchError(function (error) {
                 var _a, _b;
                 console.error(error);
                 if (!((_b = (_a = _this.uiDefinition) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.suppressToastMessages)) {