@vectoriox/iox-builder 1.1.1 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-builder",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/types/vectoriox-iox-builder.d.ts

@@ -718,9 +718,6 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     private destroyLenis;
     addComponent(name: string): void;
     onDrop(event: IoxDropEvent): void;
-    /** Resolve the width style-trait value for a node so the cdkDrag wrapper
-     *  matches the component's actual width (prevents full-canvas-width clones). */
-    getNodeWidth(node: ComponentNode): string | undefined;
     onModeChange(mode: BuilderMode): void;
     onDeviceChange(device: DeviceMode): void;
     onZoomChange(value: number | 'fit'): void;
@@ -765,18 +762,24 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
 /**
  * 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.
  */
 declare class StyleRegistryService {
     private rules;
     private styleEl;
+    /** Properties that must live on the wrapper element to affect the parent layout. */
+    private static readonly OUTER_PROPS;
     init(): void;
     upsert(nodeId: string, styles: Record<string, any>): void;
     remove(nodeId: string): void;
@@ -1008,7 +1011,6 @@ declare class SectionComponent implements OnInit, OnDestroy {
     constructor(dragEngine: DragEngineService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     get listOrientation(): 'horizontal' | 'vertical';
-    getChildWidth(node: ComponentNode): string | undefined;
     ngOnDestroy(): void;
     onDrop(event: IoxDropEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SectionComponent, never>;
@@ -1031,7 +1033,6 @@ declare class BuilderContainerComponent implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
     get listOrientation(): 'horizontal' | 'vertical';
-    getChildWidth(node: ComponentNode): string | undefined;
     onDrop(event: IoxDropEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BuilderContainerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BuilderContainerComponent, "app-builder-container", never, { "children": { "alias": "children"; "required": false; }; "style": { "alias": "style"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "dropListId": { "alias": "dropListId"; "required": false; }; }, { "childClick": "childClick"; "childMouseEnter": "childMouseEnter"; "childMouseLeave": "childMouseLeave"; }, never, never, false, never>;
@@ -1061,7 +1062,6 @@ declare class BuilderLinkedContainerComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     get resolvedHref(): string;
     get listOrientation(): 'horizontal' | 'vertical';
-    getChildWidth(node: ComponentNode): string | undefined;
     onDrop(event: IoxDropEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BuilderLinkedContainerComponent, [null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BuilderLinkedContainerComponent, "app-builder-linked-container", never, { "children": { "alias": "children"; "required": false; }; "style": { "alias": "style"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "dropListId": { "alias": "dropListId"; "required": false; }; "linkType": { "alias": "linkType"; "required": false; }; "url": { "alias": "url"; "required": false; }; "pageRoute": { "alias": "pageRoute"; "required": false; }; "target": { "alias": "target"; "required": false; }; }, { "childClick": "childClick"; "childMouseEnter": "childMouseEnter"; "childMouseLeave": "childMouseLeave"; }, never, never, false, never>;