@vectoriox/iox-ui 4.2.9 → 4.2.11

package/fesm2022/vectoriox-iox-ui.mjs

@@ -1227,6 +1227,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Directive-host Heading: the real `<h1>`…`<h6>` IS the host — no `app-builder-heading`
+ * wrapper, no inner/outer split. The tag is chosen by whoever CREATES the component
+ * (engine: `createComponent({ hostElement: document.createElement(level) })`; builder:
+ * RenderDirective does the same), NOT by an internal ngSwitch. `level` is kept as an input
+ * for that creation logic + serialization. Editing (contenteditable) runs in the builder only.
+ */
 class BuilderHeadingComponent {
     constructor(events, cdr) {
         this.events = events;
@@ -1263,11 +1270,12 @@ class BuilderHeadingComponent {
         this.syncTraitToPanel('content', newValue);
     }
     onKeyDown(event) {
-        if (event.key === 'Enter' && !event.shiftKey) {
+        const ke = event;
+        if (ke.key === 'Enter' && !ke.shiftKey) {
             event.preventDefault();
             event.target.blur();
         }
-        if (event.key === 'Escape') {
+        if (ke.key === 'Escape') {
             this.editing = false;
             this.cdr.reattach();
             event.target.blur();
@@ -1287,65 +1295,18 @@ class BuilderHeadingComponent {
         this.events.emit('elementselect', { node: this.node, componentRef: null, isCanvasUpdate: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderHeadingComponent, deps: [{ token: IOX_BUILDER_EVENTS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderHeadingComponent, isStandalone: false, selector: "app-builder-heading", inputs: { content: "content", level: "level", nodeId: "nodeId", node: "node" }, ngImport: i0, template: `
-        <ng-container [ngSwitch]="level">
-            <h1 *ngSwitchCase="'h1'" [ngClass]="'iox-node-' + nodeId"
-                [attr.contenteditable]="editing ? 'true' : null"
-                (mousedown)="onMouseDown($event)"
-                (dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h1>
-            <h2 *ngSwitchCase="'h2'" [ngClass]="'iox-node-' + nodeId"
-                [attr.contenteditable]="editing ? 'true' : null"
-                (mousedown)="onMouseDown($event)"
-                (dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h2>
-            <h3 *ngSwitchCase="'h3'" [ngClass]="'iox-node-' + nodeId"
-                [attr.contenteditable]="editing ? 'true' : null"
-                (mousedown)="onMouseDown($event)"
-                (dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h3>
-            <h4 *ngSwitchCase="'h4'" [ngClass]="'iox-node-' + nodeId"
-                [attr.contenteditable]="editing ? 'true' : null"
-                (mousedown)="onMouseDown($event)"
-                (dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h4>
-            <h5 *ngSwitchCase="'h5'" [ngClass]="'iox-node-' + nodeId"
-                [attr.contenteditable]="editing ? 'true' : null"
-                (mousedown)="onMouseDown($event)"
-                (dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h5>
-            <h6 *ngSwitchDefault   [ngClass]="'iox-node-' + nodeId"
-                [attr.contenteditable]="editing ? 'true' : null"
-                (mousedown)="onMouseDown($event)"
-                (dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h6>
-        </ng-container>
-    `, isInline: true, styles: ["h1,h2,h3,h4,h5,h6{margin:0}[contenteditable]{outline:none;cursor:text}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderHeadingComponent, isStandalone: false, selector: "h1[iox-heading],h2[iox-heading],h3[iox-heading],h4[iox-heading],h5[iox-heading],h6[iox-heading]", inputs: { content: "content", level: "level", nodeId: "nodeId", node: "node" }, host: { listeners: { "mousedown": "onMouseDown($event)", "dblclick": "startEdit($event)", "blur": "commitEdit($event)", "keydown": "onKeyDown($event)" }, properties: { "class": "'iox-node-' + nodeId", "attr.contenteditable": "editing ? 'true' : null" } }, ngImport: i0, template: `{{ content }}`, isInline: true, styles: [":host{margin:0}:host[contenteditable]{outline:none;cursor:text}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderHeadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-builder-heading', template: `
-        <ng-container [ngSwitch]="level">
-            <h1 *ngSwitchCase="'h1'" [ngClass]="'iox-node-' + nodeId"
-                [attr.contenteditable]="editing ? 'true' : null"
-                (mousedown)="onMouseDown($event)"
-                (dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h1>
-            <h2 *ngSwitchCase="'h2'" [ngClass]="'iox-node-' + nodeId"
-                [attr.contenteditable]="editing ? 'true' : null"
-                (mousedown)="onMouseDown($event)"
-                (dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h2>
-            <h3 *ngSwitchCase="'h3'" [ngClass]="'iox-node-' + nodeId"
-                [attr.contenteditable]="editing ? 'true' : null"
-                (mousedown)="onMouseDown($event)"
-                (dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h3>
-            <h4 *ngSwitchCase="'h4'" [ngClass]="'iox-node-' + nodeId"
-                [attr.contenteditable]="editing ? 'true' : null"
-                (mousedown)="onMouseDown($event)"
-                (dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h4>
-            <h5 *ngSwitchCase="'h5'" [ngClass]="'iox-node-' + nodeId"
-                [attr.contenteditable]="editing ? 'true' : null"
-                (mousedown)="onMouseDown($event)"
-                (dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h5>
-            <h6 *ngSwitchDefault   [ngClass]="'iox-node-' + nodeId"
-                [attr.contenteditable]="editing ? 'true' : null"
-                (mousedown)="onMouseDown($event)"
-                (dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h6>
-        </ng-container>
-    `, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["h1,h2,h3,h4,h5,h6{margin:0}[contenteditable]{outline:none;cursor:text}\n"] }]
+            args: [{ selector: 'h1[iox-heading],h2[iox-heading],h3[iox-heading],h4[iox-heading],h5[iox-heading],h6[iox-heading]', template: `{{ content }}`, host: {
+                        '[class]': "'iox-node-' + nodeId",
+                        '[attr.contenteditable]': "editing ? 'true' : null",
+                        '(mousedown)': 'onMouseDown($event)',
+                        '(dblclick)': 'startEdit($event)',
+                        '(blur)': 'commitEdit($event)',
+                        '(keydown)': 'onKeyDown($event)',
+                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{margin:0}:host[contenteditable]{outline:none;cursor:text}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1361,6 +1322,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Directive-host Text: the real `<p>`/`<span>` IS the host — no `app-text-block` wrapper,
+ * no inner/outer split. The tag is chosen by whoever CREATES the component (engine/builder
+ * pass `hostElement`), NOT an internal ngSwitch. Content is rich HTML (Quill) → bound via
+ * `[innerHTML]` on the host. Editing (contenteditable) runs in the builder only.
+ */
 class TextBlockComponent {
     constructor(events, cdr) {
         this.events = events;
@@ -1409,7 +1376,7 @@ class TextBlockComponent {
         const newValue = el.innerText;
         this.content = newValue;
         // Explicitly reset to plain text so any pasted HTML nodes are gone
-        // before Angular re-renders {{ content }}
+        // before Angular re-renders [innerHTML]
         el.textContent = newValue;
         this.cdr.reattach();
         this.syncTraitToPanel('content', newValue);
@@ -1435,57 +1402,21 @@ class TextBlockComponent {
         this.events.emit('elementselect', { node: this.node, componentRef: null, isCanvasUpdate: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TextBlockComponent, deps: [{ token: IOX_BUILDER_EVENTS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: TextBlockComponent, isStandalone: false, selector: "app-text-block", inputs: { content: "content", tag: "tag", style: "style", nodeId: "nodeId", node: "node" }, ngImport: i0, template: `
-        <ng-container [ngSwitch]="tag">
-            <p *ngSwitchDefault
-               [ngClass]="'iox-node-' + nodeId"
-               [attr.contenteditable]="editing ? 'true' : null"
-               (pointerdown)="onPointerDown($event)"
-               (mousedown)="onMouseDown($event)"
-               (dblclick)="startEdit($event)"
-               (blur)="commitEdit($event)"
-               (keydown)="onKeyDown($event)"
-               (paste)="onPaste($event)"
-               [innerHTML]="content"></p>
-            <span *ngSwitchCase="'span'"
-               [ngClass]="'iox-node-' + nodeId"
-               [attr.contenteditable]="editing ? 'true' : null"
-               (pointerdown)="onPointerDown($event)"
-               (mousedown)="onMouseDown($event)"
-               (dblclick)="startEdit($event)"
-               (blur)="commitEdit($event)"
-               (keydown)="onKeyDown($event)"
-               (paste)="onPaste($event)"
-               [innerHTML]="content"></span>
-        </ng-container>
-    `, isInline: true, styles: ["p,span{margin:0;white-space:pre-wrap}[contenteditable]{outline:none;cursor:text}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: TextBlockComponent, isStandalone: false, selector: "p[iox-text],span[iox-text]", inputs: { content: "content", tag: "tag", style: "style", nodeId: "nodeId", node: "node" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "mousedown": "onMouseDown($event)", "dblclick": "startEdit($event)", "blur": "commitEdit($event)", "keydown": "onKeyDown($event)", "paste": "onPaste($event)" }, properties: { "class": "'iox-node-' + nodeId", "innerHTML": "content", "attr.contenteditable": "editing ? 'true' : null" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{margin:0;white-space:pre-wrap}:host[contenteditable]{outline:none;cursor:text}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TextBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-text-block', template: `
-        <ng-container [ngSwitch]="tag">
-            <p *ngSwitchDefault
-               [ngClass]="'iox-node-' + nodeId"
-               [attr.contenteditable]="editing ? 'true' : null"
-               (pointerdown)="onPointerDown($event)"
-               (mousedown)="onMouseDown($event)"
-               (dblclick)="startEdit($event)"
-               (blur)="commitEdit($event)"
-               (keydown)="onKeyDown($event)"
-               (paste)="onPaste($event)"
-               [innerHTML]="content"></p>
-            <span *ngSwitchCase="'span'"
-               [ngClass]="'iox-node-' + nodeId"
-               [attr.contenteditable]="editing ? 'true' : null"
-               (pointerdown)="onPointerDown($event)"
-               (mousedown)="onMouseDown($event)"
-               (dblclick)="startEdit($event)"
-               (blur)="commitEdit($event)"
-               (keydown)="onKeyDown($event)"
-               (paste)="onPaste($event)"
-               [innerHTML]="content"></span>
-        </ng-container>
-    `, standalone: false, styles: ["p,span{margin:0;white-space:pre-wrap}[contenteditable]{outline:none;cursor:text}\n"] }]
+            args: [{ selector: 'p[iox-text],span[iox-text]', template: ``, host: {
+                        '[class]': "'iox-node-' + nodeId",
+                        '[innerHTML]': 'content',
+                        '[attr.contenteditable]': "editing ? 'true' : null",
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(mousedown)': 'onMouseDown($event)',
+                        '(dblclick)': 'startEdit($event)',
+                        '(blur)': 'commitEdit($event)',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(paste)': 'onPaste($event)',
+                    }, standalone: false, styles: [":host{margin:0;white-space:pre-wrap}:host[contenteditable]{outline:none;cursor:text}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1509,11 +1440,11 @@ class SectionComponent {
         this.nodeId = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SectionComponent, isStandalone: false, selector: "section[iox-section]", inputs: { nodeId: "nodeId" }, host: { properties: { "class": "'iox-node-' + nodeId" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{display:block;position:relative;box-sizing:border-box}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SectionComponent, isStandalone: false, selector: "section[iox-section]", inputs: { nodeId: "nodeId" }, host: { properties: { "class": "'iox-node-' + nodeId" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'section[iox-section]', template: `<ng-container #childrenHost></ng-container>`, host: { '[class]': "'iox-node-' + nodeId" }, standalone: false, styles: [":host{display:block;position:relative;box-sizing:border-box}\n"] }]
+            args: [{ selector: 'section[iox-section]', template: `<ng-container #childrenHost></ng-container>`, host: { '[class]': "'iox-node-' + nodeId" }, standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
         }], propDecorators: { nodeId: [{
                 type: Input
             }], childrenHost: [{
@@ -1527,11 +1458,11 @@ class ContainerComponent {
         this.nodeId = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ContainerComponent, isStandalone: false, selector: "div[iox-container]", inputs: { nodeId: "nodeId" }, host: { properties: { "class": "'iox-node-' + nodeId" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{display:block;position:relative;box-sizing:border-box}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ContainerComponent, isStandalone: false, selector: "div[iox-container]", inputs: { nodeId: "nodeId" }, host: { properties: { "class": "'iox-node-' + nodeId" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[iox-container]', template: `<ng-container #childrenHost></ng-container>`, host: { '[class]': "'iox-node-' + nodeId" }, standalone: false, styles: [":host{display:block;position:relative;box-sizing:border-box}\n"] }]
+            args: [{ selector: 'div[iox-container]', template: `<ng-container #childrenHost></ng-container>`, host: { '[class]': "'iox-node-' + nodeId" }, standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
         }], propDecorators: { nodeId: [{
                 type: Input
             }], childrenHost: [{
@@ -1567,7 +1498,7 @@ class LinkedContainerComponent {
         return this.pageRoute || '#';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LinkedContainerComponent, deps: [{ token: i0.ElementRef }, { token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: LinkedContainerComponent, isStandalone: false, selector: "a[iox-linked-container]", inputs: { nodeId: "nodeId", linkType: "linkType", url: "url", pageRoute: "pageRoute", target: "target" }, host: { properties: { "attr.href": "resolvedHref", "attr.target": "target", "class": "'linked-container-root iox-node-' + nodeId" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: LinkedContainerComponent, isStandalone: false, selector: "a[iox-linked-container]", inputs: { nodeId: "nodeId", linkType: "linkType", url: "url", pageRoute: "pageRoute", target: "target" }, host: { properties: { "attr.href": "resolvedHref", "attr.target": "target", "class": "'linked-container-root iox-node-' + nodeId" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box;text-decoration:none;cursor:pointer}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LinkedContainerComponent, decorators: [{
             type: Component,
@@ -1575,7 +1506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         '[attr.href]': 'resolvedHref',
                         '[attr.target]': 'target',
                         '[class]': "'linked-container-root iox-node-' + nodeId",
-                    }, standalone: false, styles: [":host{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}\n"] }]
+                    }, standalone: false, styles: [":host{box-sizing:border-box;text-decoration:none;cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1627,6 +1558,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: ['childrenHost', { read: ViewContainerRef, static: true }]
             }] } });
 
+/**
+ * Directive-host ButtonBlock: the real `<a>`/`<button>` IS the host — no `app-button-block`
+ * wrapper, no inner/outer split. The tag is chosen by whoever CREATES the component (engine
+ * passes `hostElement`: `<a>` when `tag==='a'`, else `<button>`), NOT an internal `*ngIf`.
+ * The `iox-btn-block` class (UA resets: inline-flex, color/font inherit, no border) matches the
+ * string renderer and lives in the engine's global styles.scss — kept OFF `:host` so styleProps
+ * (`.iox-node-{id}`) can override it. Children render into the host via `childrenHost`.
+ */
 class ButtonBlockComponent {
     constructor() {
         this.tag = 'button';
@@ -1635,39 +1574,17 @@ class ButtonBlockComponent {
         this.type = 'button';
         this.nodeId = '';
     }
-    get childrenHost() {
-        return this.tag === 'a' ? this.linkHost : this.buttonHost;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ButtonBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ButtonBlockComponent, isStandalone: false, selector: "app-button-block", inputs: { tag: "tag", href: "href", target: "target", type: "type", nodeId: "nodeId" }, viewQueries: [{ propertyName: "buttonHost", first: true, predicate: ["buttonHost"], descendants: true, read: ViewContainerRef }, { propertyName: "linkHost", first: true, predicate: ["linkHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
-        <button *ngIf="tag !== 'a'"
-                [ngClass]="'iox-node-' + nodeId"
-                [attr.type]="type">
-            <ng-container #buttonHost></ng-container>
-        </button>
-        <a *ngIf="tag === 'a'"
-           [ngClass]="'iox-node-' + nodeId"
-           [attr.href]="href || null"
-           [attr.target]="target || null">
-            <ng-container #linkHost></ng-container>
-        </a>
-    `, isInline: true, styles: ["button,a{width:100%;font:inherit;color:inherit;text-decoration:none;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ButtonBlockComponent, isStandalone: false, selector: "a[iox-button-block],button[iox-button-block]", inputs: { tag: "tag", href: "href", target: "target", type: "type", nodeId: "nodeId" }, host: { properties: { "class": "'iox-btn-block iox-node-' + nodeId", "attr.href": "tag === 'a' ? (href || null) : null", "attr.target": "tag === 'a' ? (target || null) : null", "attr.type": "tag === 'a' ? null : type" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ButtonBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button-block', template: `
-        <button *ngIf="tag !== 'a'"
-                [ngClass]="'iox-node-' + nodeId"
-                [attr.type]="type">
-            <ng-container #buttonHost></ng-container>
-        </button>
-        <a *ngIf="tag === 'a'"
-           [ngClass]="'iox-node-' + nodeId"
-           [attr.href]="href || null"
-           [attr.target]="target || null">
-            <ng-container #linkHost></ng-container>
-        </a>
-    `, standalone: false, styles: ["button,a{width:100%;font:inherit;color:inherit;text-decoration:none;box-sizing:border-box}\n"] }]
+            args: [{ selector: 'a[iox-button-block],button[iox-button-block]', template: `<ng-container #childrenHost></ng-container>`, host: {
+                        '[class]': "'iox-btn-block 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}\n"] }]
         }], propDecorators: { tag: [{
                 type: Input
             }], href: [{
@@ -1678,12 +1595,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Input
             }], nodeId: [{
                 type: Input
-            }], buttonHost: [{
-                type: ViewChild,
-                args: ['buttonHost', { read: ViewContainerRef, static: false }]
-            }], linkHost: [{
+            }], childrenHost: [{
                 type: ViewChild,
-                args: ['linkHost', { read: ViewContainerRef, static: false }]
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
             }] } });
 
 class ClientSliderContainerComponent {
@@ -1915,12 +1829,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }] } });
 
 /**
- * Client-engine List. Renders a real `<ul>`/`<ol>` (chosen by the `htmlTag` trait) with the
- * shared `iox-node-{id}` class, and inserts children into it via `childrenHost`. `:host` uses
- * `display: contents` so the `<ul>`/`<ol>` is the effective layout child of its parent.
- *
- * The host is chosen from a `*ngIf` branch, so its ViewContainerRef only resolves after change
- * detection — ClientTreeRendererService detects changes before reading `childrenHost`.
+ * Directive-host List: the real `<ul>`/`<ol>` IS the host — no `iox-list` wrapper, no
+ * inner/outer split. The tag is chosen by whoever CREATES the component (engine passes
+ * `hostElement: document.createElement(htmlTag)`), NOT an internal `*ngIf`. Children render
+ * into the host via `childrenHost`. `start`/`reversed` are host attrs (only meaningful on `<ol>`).
  */
 class ClientListComponent {
     constructor() {
@@ -1929,33 +1841,16 @@ class ClientListComponent {
         this.reversed = false;
         this.nodeId = '';
     }
-    get childrenHost() {
-        return this.htmlTag === 'ol' ? this.olHost : this.ulHost;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ClientListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ClientListComponent, isStandalone: false, selector: "iox-list", inputs: { htmlTag: "htmlTag", start: "start", reversed: "reversed", nodeId: "nodeId" }, viewQueries: [{ propertyName: "olHost", first: true, predicate: ["olHost"], descendants: true, read: ViewContainerRef }, { propertyName: "ulHost", first: true, predicate: ["ulHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
-        <ol *ngIf="htmlTag === 'ol'" [ngClass]="'iox-node-' + nodeId"
-            [attr.start]="start !== '' && start != null ? start : null"
-            [attr.reversed]="reversed ? '' : null">
-            <ng-container #olHost></ng-container>
-        </ol>
-        <ul *ngIf="htmlTag !== 'ol'" [ngClass]="'iox-node-' + nodeId">
-            <ng-container #ulHost></ng-container>
-        </ul>
-    `, isInline: true, styles: [":host{display:contents}ul,ol{margin:0;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ClientListComponent, isStandalone: false, selector: "ul[iox-list],ol[iox-list]", inputs: { htmlTag: "htmlTag", start: "start", reversed: "reversed", nodeId: "nodeId" }, host: { properties: { "class": "'iox-node-' + nodeId", "attr.start": "htmlTag === 'ol' && start !== '' && start != null ? start : null", "attr.reversed": "htmlTag === 'ol' && reversed ? '' : null" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{margin:0;box-sizing:border-box}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ClientListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'iox-list', template: `
-        <ol *ngIf="htmlTag === 'ol'" [ngClass]="'iox-node-' + nodeId"
-            [attr.start]="start !== '' && start != null ? start : null"
-            [attr.reversed]="reversed ? '' : null">
-            <ng-container #olHost></ng-container>
-        </ol>
-        <ul *ngIf="htmlTag !== 'ol'" [ngClass]="'iox-node-' + nodeId">
-            <ng-container #ulHost></ng-container>
-        </ul>
-    `, standalone: false, styles: [":host{display:contents}ul,ol{margin:0;box-sizing:border-box}\n"] }]
+            args: [{ selector: 'ul[iox-list],ol[iox-list]', template: `<ng-container #childrenHost></ng-container>`, host: {
+                        '[class]': "'iox-node-' + nodeId",
+                        '[attr.start]': "htmlTag === 'ol' && start !== '' && start != null ? start : null",
+                        '[attr.reversed]': "htmlTag === 'ol' && reversed ? '' : null",
+                    }, standalone: false, styles: [":host{margin:0;box-sizing:border-box}\n"] }]
         }], propDecorators: { htmlTag: [{
                 type: Input
             }], start: [{
@@ -1964,29 +1859,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Input
             }], nodeId: [{
                 type: Input
-            }], olHost: [{
-                type: ViewChild,
-                args: ['olHost', { read: ViewContainerRef }]
-            }], ulHost: [{
+            }], childrenHost: [{
                 type: ViewChild,
-                args: ['ulHost', { read: ViewContainerRef }]
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
             }] } });
 
 /**
- * Client-engine List item. Renders a real `<li>` with the shared `iox-node-{id}` class.
- * `:host { display: contents }` removes the `iox-list-item` wrapper from the box tree so the
- * `<li>` is a proper (marker-bearing) child of the parent `<ul>`/`<ol>`.
+ * Directive-host List item: the real `<li>` IS the host — no `iox-list-item` wrapper, no
+ * inner/outer split. Children render into the `<li>` via `childrenHost`. Fixed tag (`<li>`),
+ * so the engine creates it with `vcr.createComponent` (no `hostElement` needed).
  */
 class ClientListItemComponent {
     constructor() {
         this.nodeId = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ClientListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ClientListItemComponent, isStandalone: false, selector: "iox-list-item", inputs: { nodeId: "nodeId" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<li [ngClass]="'iox-node-' + nodeId"><ng-container #childrenHost></ng-container></li>`, isInline: true, styles: [":host{display:contents}li{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ClientListItemComponent, isStandalone: false, selector: "li[iox-list-item]", inputs: { nodeId: "nodeId" }, host: { properties: { "class": "'iox-node-' + nodeId" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ClientListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'iox-list-item', template: `<li [ngClass]="'iox-node-' + nodeId"><ng-container #childrenHost></ng-container></li>`, standalone: false, styles: [":host{display:contents}li{box-sizing:border-box}\n"] }]
+            args: [{ selector: 'li[iox-list-item]', template: `<ng-container #childrenHost></ng-container>`, host: { '[class]': "'iox-node-' + nodeId" }, standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
         }], propDecorators: { nodeId: [{
                 type: Input
             }], childrenHost: [{
@@ -2223,6 +2115,15 @@ function renderDefaultDeclarations(type, styleProps, hasHoverState) {
             out.push('object-fit: cover');
         out.push('height: auto');
     }
+    // Containers default to a positioning context (for absolutely-positioned children). These live
+    // in `.iox-node` (not the component `:host`) so an explicit styleProps value always wins.
+    if ((type === 'Container' || type === 'Section' || type === 'LinkedContainer') && sp['position'] === undefined) {
+        out.push('position: relative');
+    }
+    // LinkedContainer is an <a> (inline by default) → default it to block so children lay out.
+    if (type === 'LinkedContainer' && sp['display'] === undefined) {
+        out.push('display: block');
+    }
     return out;
 }