@veloceapps/sdk 5.0.10 → 5.0.12

package/fesm2015/veloce-sdk-cms.js

@@ -654,15 +654,36 @@ class ElementRendererComponent {
             this.processChildren(children);
         });
     }
+    getModelComponent() {
+        let component = null;
+        let injector = this.parentInjector;
+        while (!component) {
+            const 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;
+    }
     createFromLineItem(path) {
         var _a, _b;
-        const parentComp = this.parentInjector.get(ElementRendererComponent, null);
+        const parentComp = this.getModelComponent();
         const parentPath = (_a = parentComp === null || parentComp === void 0 ? void 0 : parentComp.meta.model) === null || _a === void 0 ? void 0 : _a.lineItem;
         const pathBlocks = parseBoundPath(path).reverse();
         const { property, name } = (_b = pathBlocks[1]) !== null && _b !== void 0 ? _b : {};
         const finalPath = pathBlocks[0];
         const children$ = this.getParentLineItem$(parentComp).pipe(map(model => {
             var _a;
+            if (!model) {
+                return [];
+            }
             if (property === 'ports' && !finalPath.property && parentPath !== path) {
                 return (_a = model.lineItems.filter(({ port }) => port === name)) !== null && _a !== void 0 ? _a : [];
             }
@@ -1178,12 +1199,8 @@ class ElementsResolver {
             console.warn(`Unknown element type "${element.type}"`);
             return;
         }
-        const 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;
-        }
-        const component = Object.assign(Object.assign({ selector: 'vl-element', template: element.template }, (element.styles ? { styles: [element.styles] } : {})), { providers: [
+        const styles = this.getElementStyles(element);
+        const 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 },
@@ -1196,16 +1213,28 @@ class ElementsResolver {
         set(cmp, 'path', element.path);
         return cmp;
     }
+    getElementStyles(element) {
+        let result = '';
+        const 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;
+    }
     convertInlineStylesToCSS(styles) {
         if (!styles) {
             return '';
         }
         const entries = Object.entries(styles);
-        let result = ':host {';
+        let result = ':host {\n';
         entries.forEach(([style, value]) => {
-            result += `${kebabCase(style)}:${value};`;
+            result += `  ${kebabCase(style)}:${value};\n`;
         });
-        result += '}';
+        result += '}\n';
         return result;
     }
 }