@vectoriox/iox-builder 2.1.0 → 2.1.1

package/fesm2022/vectoriox-iox-builder.mjs

@@ -5972,8 +5972,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Directive-host ButtonBlock (wrapper collapse, task 9c). The real `<button>`/`<a>` IS the host —
+ * chosen by RenderDirective via `hostElement` from the `tag` trait (`variableTag`), NOT an internal
+ * `<button>` in the template. This matches the SSR engine's `button[iox-button-block]` component and
+ * every other collapsed builder component (Container/Section/List/…): ONE element per node carrying
+ * BOTH `iox-outer-{id}` (margin/width) + `iox-node-{id}` (visual props). Previously this component
+ * kept the OLD pattern — a custom-element selector plus a template that rendered its own
+ * `<button class="button-block-root">` — so RenderDirective's host `<button>` (iox-outer) wrapped a
+ * second `<button>` (iox-node): button-in-button, and width (outer) + aspect-ratio (inner) split
+ * across two elements so aspect-ratio never resolved. Collapsing to the single host fixes both.
+ *
+ * The `button`/`a` UA resets (border, background, text-decoration) live in the builder app's global
+ * styles.scss, kept OFF `:host` so styleProps (`.iox-node-{id}`) can override them.
+ */
 class BuilderButtonBlockComponent {
-    constructor(dragEngine, cdr) {
+    constructor(elRef, dragEngine, cdr) {
+        this.elRef = elRef;
         this.dragEngine = dragEngine;
         this.cdr = cdr;
         this.children = [];
@@ -5988,58 +6003,52 @@ class BuilderButtonBlockComponent {
         this.childMouseEnter = new EventEmitter();
         this.childMouseLeave = new EventEmitter();
     }
-    ngOnInit() { }
-    ngOnDestroy() { }
+    ngOnInit() {
+        // Register the HOST as the dropzone (was the ioxDropzone directive on the inner button).
+        this.dragEngine.registerDropzone(this.dropListId, this.elRef.nativeElement, this.children, this.cdr, (evt) => this.onDrop(evt));
+    }
+    ngOnDestroy() {
+        this.dragEngine.unregisterDropzone(this.dropListId, this.elRef.nativeElement);
+    }
     onDrop(event) {
         this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderButtonBlockComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderButtonBlockComponent, isStandalone: false, selector: "app-builder-button-block", inputs: { children: "children", style: "style", tag: "tag", href: "href", target: "target", type: "type", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
-        <button class="button-block-root"
-                [ngClass]="'iox-node-' + nodeId"
-                type="button"
-                ioxDropzone
-                [ioxDropzoneId]="dropListId"
-                [ioxDropzoneData]="children"
-                (ioxDrop)="onDrop($event)">
-            <ng-container *ngIf="!children.length">
-                <span class="button-block-placeholder">Button</span>
-            </ng-container>
-            <!-- WRAPPER COLLAPSE (task 9c): render children directly; iox-outer + drag on the host. -->
-            <ng-container *ngFor="let child of children"
-                [ioxRender]="child"
-                [ioxDragSourceId]="dropListId"
-                (onClick)="childClick.emit($event)"
-                (onMouseEnter)="childMouseEnter.emit($event)"
-                (onMouseLeave)="childMouseLeave.emit()">
-            </ng-container>
-        </button>
-    `, isInline: true, styles: [".button-block-root{width:100%;font:inherit;color:inherit;text-decoration:none;box-sizing:border-box}.button-block-placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:#64748b66;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}:host ::ng-deep .button-block-root>[class*=iox-outer-]{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderButtonBlockComponent, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderButtonBlockComponent, isStandalone: false, selector: "button[iox-button-block],a[iox-button-block]", inputs: { children: "children", style: "style", tag: "tag", href: "href", target: "target", type: "type", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'button-block-root iox-node-' + nodeId", "attr.href": "tag === 'a' ? (href || null) : null", "attr.target": "tag === 'a' ? (target || null) : null", "attr.type": "tag === 'a' ? null : type" } }, ngImport: i0, template: `
+        <span *ngIf="!children.length" class="button-block-placeholder">Button</span>
+
+        <!-- WRAPPER COLLAPSE (task 9c): render children directly into the host; iox-outer + drag land
+             on each child's host (via ioxDragSourceId), matching the SSR engine. -->
+        <ng-container *ngFor="let child of children"
+            [ioxRender]="child"
+            [ioxDragSourceId]="dropListId"
+            (onClick)="childClick.emit($event)"
+            (onMouseEnter)="childMouseEnter.emit($event)"
+            (onMouseLeave)="childMouseLeave.emit()">
+        </ng-container>
+    `, isInline: true, styles: [":host{box-sizing:border-box}.button-block-placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:#64748b66;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}:host ::ng-deep>[class*=iox-outer-]{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderButtonBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-builder-button-block', template: `
-        <button class="button-block-root"
-                [ngClass]="'iox-node-' + nodeId"
-                type="button"
-                ioxDropzone
-                [ioxDropzoneId]="dropListId"
-                [ioxDropzoneData]="children"
-                (ioxDrop)="onDrop($event)">
-            <ng-container *ngIf="!children.length">
-                <span class="button-block-placeholder">Button</span>
-            </ng-container>
-            <!-- WRAPPER COLLAPSE (task 9c): render children directly; iox-outer + drag on the host. -->
-            <ng-container *ngFor="let child of children"
-                [ioxRender]="child"
-                [ioxDragSourceId]="dropListId"
-                (onClick)="childClick.emit($event)"
-                (onMouseEnter)="childMouseEnter.emit($event)"
-                (onMouseLeave)="childMouseLeave.emit()">
-            </ng-container>
-        </button>
-    `, standalone: false, styles: [".button-block-root{width:100%;font:inherit;color:inherit;text-decoration:none;box-sizing:border-box}.button-block-placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:#64748b66;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}:host ::ng-deep .button-block-root>[class*=iox-outer-]{min-width:0}\n"] }]
-        }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
+            args: [{ selector: 'button[iox-button-block],a[iox-button-block]', template: `
+        <span *ngIf="!children.length" class="button-block-placeholder">Button</span>
+
+        <!-- WRAPPER COLLAPSE (task 9c): render children directly into the host; iox-outer + drag land
+             on each child's host (via ioxDragSourceId), matching the SSR engine. -->
+        <ng-container *ngFor="let child of children"
+            [ioxRender]="child"
+            [ioxDragSourceId]="dropListId"
+            (onClick)="childClick.emit($event)"
+            (onMouseEnter)="childMouseEnter.emit($event)"
+            (onMouseLeave)="childMouseLeave.emit()">
+        </ng-container>
+    `, host: {
+                        '[class]': "'button-block-root iox-node-' + nodeId",
+                        '[attr.href]': "tag === 'a' ? (href || null) : null",
+                        '[attr.target]': "tag === 'a' ? (target || null) : null",
+                        '[attr.type]': "tag === 'a' ? null : type",
+                    }, standalone: false, styles: [":host{box-sizing:border-box}.button-block-placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:#64748b66;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}:host ::ng-deep>[class*=iox-outer-]{min-width:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
                 type: Input
             }], style: [{
                 type: Input