@vectoriox/iox-builder 1.6.12 → 1.6.14

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, NgZone, EventEmitter, Output, Input, Directive, ChangeDetectionStrategy, Component, ViewChild, Optional, Inject, InjectionToken, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { Injectable, inject, NgZone, EventEmitter, createComponent, Output, Input, Inject, Directive, ChangeDetectionStrategy, Component, ViewChild, Optional, InjectionToken, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i4$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i4 from '@angular/cdk/drag-drop';
@@ -2663,6 +2663,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 
 // Module-level counter — unique drop-list ID per Section instance across the whole app session.
 let dropListCounter = 0;
+/**
+ * Node types whose iox-ui component is a DIRECTIVE-HOST (element+attribute selector on the real
+ * tag, e.g. `img[iox-img]`, `h1[iox-heading]`). The host IS the element, so we must NOT force an
+ * inline `display:block` (it out-ranks both `:host` and the styleProps `.iox-node` rule — the same
+ * bug the SSR engine hit). Mirrors the engine's DIRECTIVE_HOST_TYPES for the leaf/variable-tag set.
+ * NOTE: Container/Section/List/ListItem render via iox-BUILDER wrapper components here (not
+ * directive-hosts), so they are intentionally excluded.
+ */
+const DIRECTIVE_HOST_TYPES = new Set([
+    'Image', 'Icon', 'Divider', 'Spacer', 'Button', 'Link', 'Heading', 'Text', 'ButtonBlock',
+]);
 /**
  * RenderDirective — applied to <ng-container> to dynamically instantiate a
  * builder component with zero wrapper elements in the DOM.
@@ -2679,9 +2690,11 @@ let dropListCounter = 0;
  *   </ng-container>
  */
 class RenderDirective {
-    constructor(vcr, injector, registryService, overlayService, styleRegistry, interactionEngine, cdr, panelEventService) {
+    constructor(vcr, injector, envInjector, doc, registryService, overlayService, styleRegistry, interactionEngine, cdr, panelEventService) {
         this.vcr = vcr;
         this.injector = injector;
+        this.envInjector = envInjector;
+        this.doc = doc;
         this.registryService = registryService;
         this.overlayService = overlayService;
         this.styleRegistry = styleRegistry;
@@ -2694,6 +2707,26 @@ class RenderDirective {
         this.onMouseLeave = new EventEmitter();
         this.childSubs = [];
     }
+    /**
+     * Tag for a variable-tag directive-host (whose selector lists several tags, so
+     * `vcr.createComponent` would always pick the first). Reads the value from the node's traits.
+     * Returns null for fixed-tag hosts and non-directive-host components.
+     */
+    variableTag(node) {
+        const traitVal = (name) => Object.values(node.traits || {}).find(t => t?.name === name)?.default;
+        switch (node.type) {
+            case 'Heading': {
+                const l = traitVal('level');
+                return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(l) ? l : 'h2';
+            }
+            case 'Text':
+                return traitVal('tag') === 'span' ? 'span' : 'p';
+            case 'ButtonBlock':
+                return traitVal('tag') === 'a' ? 'a' : 'button';
+            default:
+                return null;
+        }
+    }
     ngOnInit() {
         this.render(this.ioxRender);
     }
@@ -2735,7 +2768,23 @@ class RenderDirective {
             return;
         // vcr.createComponent inserts the new component's host element after the ng-container
         // comment anchor — directly inside the parent element. No wrapper div is created.
-        const componentRef = this.vcr.createComponent(componentClass, { injector: this.injector });
+        // Variable-tag directive-hosts (Heading/Text/ButtonBlock) list every allowed tag in their
+        // selector, so vcr.createComponent would always pick the FIRST — create them on an explicit
+        // hostElement of the right tag and insert that view instead (mirrors the SSR engine).
+        const tag = this.variableTag(node);
+        let componentRef;
+        if (tag) {
+            const hostElement = this.doc.createElement(tag);
+            componentRef = createComponent(componentClass, {
+                environmentInjector: this.envInjector,
+                elementInjector: this.injector,
+                hostElement,
+            });
+            this.vcr.insert(componentRef.hostView);
+        }
+        else {
+            componentRef = this.vcr.createComponent(componentClass, { injector: this.injector });
+        }
         // Apply regular trait defaults (title, image, description, etc.)
         // Use setInput() (Angular 14+) — it marks the view dirty and
         // integrates with Angular's CD tracking, unlike direct assignment.
@@ -2806,9 +2855,11 @@ class RenderDirective {
         // For layout components the host element is <app-section>; for leaf components
         // it is e.g. <app-card>. Either way this is the correct inspectable element.
         const nativeEl = componentRef.location?.nativeElement ?? null;
-        // Custom element host defaults to display:inline. Set it to block so it
-        // participates properly in layout and CDK can capture its bounding rect.
-        if (nativeEl) {
+        // Custom element host defaults to display:inline. Set it to block so it participates
+        // properly in layout and CDK can capture its bounding rect. SKIP for directive-hosts: the
+        // host is a real element with its own display, and an inline style here out-ranks both
+        // `:host` and the styleProps `.iox-node` rule (it would e.g. force Link's <a> to block).
+        if (nativeEl && !DIRECTIVE_HOST_TYPES.has(node.type)) {
             nativeEl.style.display = 'block';
         }
         // Preview clones (repeater/slider-generated rows) are display-only — only the
@@ -2875,7 +2926,7 @@ class RenderDirective {
             ref.instance[name] = value;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: RenderDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: ComponentRegistryService }, { token: OverlayService }, { token: StyleRegistryService }, { token: InteractionEngineService }, { token: i0.ChangeDetectorRef }, { token: PanelEventService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: RenderDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.EnvironmentInjector }, { token: DOCUMENT }, { token: ComponentRegistryService }, { token: OverlayService }, { token: StyleRegistryService }, { token: InteractionEngineService }, { token: i0.ChangeDetectorRef }, { token: PanelEventService }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: RenderDirective, isStandalone: false, selector: "[ioxRender]", inputs: { ioxRender: "ioxRender" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: RenderDirective, decorators: [{
@@ -2884,7 +2935,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     selector: '[ioxRender]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: ComponentRegistryService }, { type: OverlayService }, { type: StyleRegistryService }, { type: InteractionEngineService }, { type: i0.ChangeDetectorRef }, { type: PanelEventService }], propDecorators: { ioxRender: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.EnvironmentInjector }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: ComponentRegistryService }, { type: OverlayService }, { type: StyleRegistryService }, { type: InteractionEngineService }, { type: i0.ChangeDetectorRef }, { type: PanelEventService }], propDecorators: { ioxRender: [{
                 type: Input
             }], onClick: [{
                 type: Output
@@ -4703,7 +4757,7 @@ class SectionComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SectionComponent, isStandalone: false, selector: "app-section", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
-        <div class="section-root"
+        <section class="section-root"
              [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']"
              ioxDropzone
              [ioxDropzoneId]="dropListId"
@@ -4727,13 +4781,13 @@ class SectionComponent {
                     (onMouseLeave)="childMouseLeave.emit()">
                 </ng-container>
             </div>
-        </div>
+        </section>
     `, isInline: true, styles: [".section-root{position:relative;box-sizing:border-box}.section-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;opacity:0;transition:opacity .15s}.section-root:hover .section-placeholder,.section-root.iox-drag-over .section-placeholder{opacity:1}.section-placeholder i{font-size:22px}.section-child{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"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-section', template: `
-        <div class="section-root"
+        <section class="section-root"
              [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']"
              ioxDropzone
              [ioxDropzoneId]="dropListId"
@@ -4757,7 +4811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     (onMouseLeave)="childMouseLeave.emit()">
                 </ng-container>
             </div>
-        </div>
+        </section>
     `, standalone: false, styles: [".section-root{position:relative;box-sizing:border-box}.section-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;opacity:0;transition:opacity .15s}.section-root:hover .section-placeholder,.section-root.iox-drag-over .section-placeholder{opacity:1}.section-placeholder i{font-size:22px}.section-child{min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
                 type: Input