@veloceapps/sdk 5.0.10 → 5.0.12

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;
@@ -1635,12 +1656,8 @@
                 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 },
@@ -1658,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;