@vectoriox/iox-builder 1.1.1 → 1.1.2

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1263,12 +1263,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 /**
  * StyleRegistryService — manages a single <style> tag for the builder canvas.
  *
- * Each builder component gets a unique CSS class `.iox-node-{id}` applied to its
- * first inner element. onUpdate() in the style panel calls upsert() to compile
- * the flat style-trait map into a CSS rule and flush it to the stylesheet.
+ * Each builder component gets two CSS classes:
+ *   .iox-node-{id}  — applied to the inner element; handles layout/visual props
+ *                     (display, flex, background, border, padding, etc.)
+ *   .iox-outer-{id} — applied to the host element by RenderDirective; handles
+ *                     properties that participate in the PARENT flow (margin,
+ *                     align-self, flex-grow/shrink/basis, order).
  *
- * This replaces the old [ngStyle] binding, enabling future support for
- * hover states, breakpoints, and pseudo-selectors without DOM modifications.
+ * This split is necessary because margin on an inner wrapper only adds internal
+ * space — it does not push sibling elements. Applying margin to the host element
+ * (which IS the flex/block child in the parent container) makes it work correctly.
  *
  * Scoped to PageUiComponent.providers[] — one stylesheet per builder instance.
  */
@@ -1277,6 +1281,11 @@ class StyleRegistryService {
         this.rules = new Map();
         this.styleEl = null;
     }
+    /** Properties that must live on the host element to affect the parent layout. */
+    static { this.OUTER_PROPS = new Set([
+        'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+        'alignSelf', 'flexGrow', 'flexShrink', 'flexBasis', 'order',
+    ]); }
     init() {
         this.styleEl = document.createElement('style');
         this.styleEl.id = 'iox-runtime-styles';
@@ -1285,9 +1294,21 @@ class StyleRegistryService {
     upsert(nodeId, styles) {
         if (!nodeId)
             return;
-        const css = this.compile(nodeId, styles);
-        if (css) {
-            this.rules.set(nodeId, css);
+        const inner = {};
+        const outer = {};
+        for (const [k, v] of Object.entries(styles)) {
+            if (StyleRegistryService.OUTER_PROPS.has(k)) {
+                outer[k] = v;
+            }
+            else {
+                inner[k] = v;
+            }
+        }
+        const innerCss = this.compile(`iox-node-${nodeId}`, inner);
+        const outerCss = this.compile(`iox-outer-${nodeId}`, outer);
+        const combined = [innerCss, outerCss].filter(Boolean).join('\n');
+        if (combined) {
+            this.rules.set(nodeId, combined);
         }
         else {
             this.rules.delete(nodeId);
@@ -1307,13 +1328,13 @@ class StyleRegistryService {
             this.styleEl = null;
         }
     }
-    compile(nodeId, styles) {
+    compile(className, styles) {
         const entries = Object.entries(styles)
             .filter(([, v]) => v !== undefined && v !== null && v !== '')
             .map(([k, v]) => `  ${this.toKebabCase(k)}: ${v};`);
         if (!entries.length)
             return '';
-        return `.iox-node-${nodeId} {\n${entries.join('\n')}\n}`;
+        return `.${className} {\n${entries.join('\n')}\n}`;
     }
     toKebabCase(str) {
         return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
@@ -1424,10 +1445,15 @@ class RenderDirective {
         }
         // Use styleId when present (clone nodes share the template node's CSS rule).
         const cssId = node.styleId ?? node.id;
-        // Register CSS rule in the central stylesheet.
+        // Register CSS rules in the central stylesheet (inner + outer split).
         if (cssId) {
             this.styleRegistry.upsert(cssId, initialStyle);
         }
+        // Apply the outer CSS class to the host element so margin/flex-child
+        // properties affect the parent layout flow, not just internal spacing.
+        if (cssId) {
+            componentRef.location.nativeElement.classList.add(`iox-outer-${cssId}`);
+        }
         // Set nodeId — declared as @Input() on every builder component.
         if (cssId) {
             componentRef.setInput('nodeId', cssId);