@vectoriox/iox-ui 4.0.6 → 4.0.8

package/fesm2022/vectoriox-iox-ui.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, Output, Input, Directive, NgModule, Injectable, ViewChild, Component, Host, Optional, forwardRef, Inject, PLATFORM_ID, InjectionToken } from '@angular/core';
+import { EventEmitter, HostListener, Output, Input, Directive, NgModule, Injectable, ViewChild, Component, Host, Optional, forwardRef, Inject, PLATFORM_ID, InjectionToken, ChangeDetectionStrategy, ViewContainerRef } from '@angular/core';
 import * as i2 from '@angular/animations';
 import { style, animate } from '@angular/animations';
 import { Subject, of } from 'rxjs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Masonry } from '@fristys/masonry';
 import { BrowserModule } from '@angular/platform-browser';
-import * as i3 from '@angular/common';
+import * as i1$2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import Lenis from 'lenis';
 import * as i1 from 'ngx-cookie-service';
@@ -491,7 +491,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         }] });
 
 class PageScrollProvider {
-    constructor(platformId) {
+    constructor(zone, platformId) {
+        this.zone = zone;
         this.platformId = platformId;
     }
     init(options) {
@@ -531,18 +532,20 @@ class PageScrollProvider {
     startLoop() {
         if (!this.lenis)
             return;
-        const loop = (time) => {
-            this.lenis.raf(time);
+        this.zone.runOutsideAngular(() => {
+            const loop = (time) => {
+                this.lenis.raf(time);
+                this.rafId = requestAnimationFrame(loop);
+            };
             this.rafId = requestAnimationFrame(loop);
-        };
-        this.rafId = requestAnimationFrame(loop);
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PageScrollProvider, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PageScrollProvider, deps: [{ token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PageScrollProvider }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PageScrollProvider, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }] });
@@ -553,6 +556,7 @@ class IoxPageComponent {
         this.platformId = platformId;
         this.class = '';
         this.scrollEnabled = true;
+        this.scrollOptions = {};
         this.scrollEvent = new EventEmitter();
     }
     ngAfterViewInit() {
@@ -561,9 +565,9 @@ class IoxPageComponent {
         this.pageScrollProvider.init({
             wrapper: this.page.nativeElement,
             content: this.page.nativeElement.querySelector('.page-mask'),
-            duration: 1.2,
-            easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+            ...this.scrollOptions,
         });
+        let _dispatching = false;
         this.pageScrollProvider.instance.on('scroll', ({ scroll, progress }) => {
             const el = this.page.nativeElement;
             this.scrollEvent.emit({
@@ -575,14 +579,20 @@ class IoxPageComponent {
                 clientWidth: el.clientWidth,
                 scrollPercentage: progress * 100,
             });
+            // Guard against re-entry: dispatching 'scroll' on the Lenis wrapper
+            // triggers onNativeScroll → re-emits the Lenis scroll event → infinite loop.
+            if (_dispatching)
+                return;
+            _dispatching = true;
             el.dispatchEvent(new Event('scroll'));
+            _dispatching = false;
         });
     }
     ngOnDestroy() {
         this.pageScrollProvider.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IoxPageComponent, deps: [{ token: PageScrollProvider }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: IoxPageComponent, isStandalone: false, selector: "iox-page-component", inputs: { class: "class", scrollEnabled: "scrollEnabled" }, outputs: { scrollEvent: "scrollEvent" }, viewQueries: [{ propertyName: "page", first: true, predicate: ["page"], descendants: true }], ngImport: i0, template: "<div #page [class]=\"class\" class=\"iox-page-wrapper\">\n  <div class=\"page-mask\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{position:absolute;inset:0}.iox-page-wrapper{position:relative;width:100%;height:100%;overflow:auto}.page-mask{min-height:100%}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: IoxPageComponent, isStandalone: false, selector: "iox-page-component", inputs: { class: "class", scrollEnabled: "scrollEnabled", scrollOptions: "scrollOptions" }, outputs: { scrollEvent: "scrollEvent" }, viewQueries: [{ propertyName: "page", first: true, predicate: ["page"], descendants: true }], ngImport: i0, template: "<div #page [class]=\"class\" class=\"iox-page-wrapper\">\n  <div class=\"page-mask\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{position:absolute;inset:0}.iox-page-wrapper{position:relative;width:100%;height:100%;overflow:auto}.page-mask{min-height:100%}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IoxPageComponent, decorators: [{
             type: Component,
@@ -594,6 +604,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], scrollEnabled: [{
                 type: Input
+            }], scrollOptions: [{
+                type: Input
             }], page: [{
                 type: ViewChild,
                 args: ['page']
@@ -766,7 +778,7 @@ class PrivacyModalComponent {
         this.isOpen = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrivacyModalComponent, deps: [{ token: PrivacyModalService }, { token: ConsentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: PrivacyModalComponent, isStandalone: false, selector: "privacy-modal", ngImport: i0, template: "<div class=\"privacy-modal\" [ngClass]=\"{'open': isOpen, 'closed': !isOpen}\">\n    <div class=\"modal-content\">\n      <h2>\u05D0\u05E0\u05D7\u05E0\u05D5 \u05E9\u05D5\u05DE\u05E8\u05D9\u05DD \u05E2\u05DC \u05D4\u05E4\u05E8\u05D8\u05D9\u05D5\u05EA \u05E9\u05DC\u05DA</h2>\n      <p dir=\"rtl\">\n        <span>\n            \u05D0\u05E0\u05D7\u05E0\u05D5 \u05DE\u05E9\u05DE\u05E9\u05D9\u05DD \u05D1\u05E7\u05D1\u05E6\u05D9 \n        </span>\n        <span>Cookies </span>\n        <span>\u05DB\u05D3\u05D9 \u05DC\u05E9\u05E4\u05E8 \u05D0\u05EA \u05D7\u05D5\u05D5\u05D9\u05EA \u05D4\u05D2\u05DC\u05D9\u05E9\u05D4 \u05E9\u05DC\u05DA, \u05DC\u05E0\u05EA\u05D7 \u05E9\u05D9\u05DE\u05D5\u05E9 \u05D1\u05D0\u05EA\u05E8 \u05D5\u05DC\u05D4\u05E6\u05D9\u05E2 \u05EA\u05D5\u05DB\u05DF \u05DE\u05D5\u05EA\u05D0\u05DD \u05D0\u05D9\u05E9\u05D9\u05EA.</span>\n        <span> \u05DC\u05DE\u05D9\u05D3\u05E2 \u05E0\u05D5\u05E1\u05E3 \u05E2\u05DC \u05D0\u05D9\u05DA \u05D0\u05E0\u05D7\u05E0\u05D5 \u05DE\u05E9\u05EA\u05DE\u05E9\u05D9\u05DD \u05D1\u05DE\u05D9\u05D3\u05E2 \u05E9\u05DC\u05DA, \u05E8\u05D0\u05D4 \u05D0\u05EA <a target=\"_blank\" href=\"/privacy\">\u05DE\u05D3\u05D9\u05E0\u05D9\u05D5\u05EA \u05D4\u05E4\u05E8\u05D8\u05D9\u05D5\u05EA </a> \u05E9\u05DC\u05E0\u05D5</span>\n      </p>\n\n      <div class=\"button-container\">\n        <button class=\"accept-button\" (click)=\"onAccept()\">\u05D0\u05E0\u05D9 \u05DE\u05E1\u05DB\u05D9\u05DD</button>\n        <button class=\"decline-button\" (click)=\"onDecline()\">\u05D0\u05E0\u05D9 \u05DC\u05D0 \u05DE\u05E1\u05DB\u05D9\u05DD</button>\n      </div>\n    </div>\n</div>\n", styles: [".privacy-modal{padding:2em;background:#fff;border-radius:8px;position:fixed;z-index:10000000000000;bottom:0;left:0;right:0;height:25vh;display:flex;align-items:center;justify-content:center;transform:translateY(100%);transition:transform .3s ease-in-out}.privacy-modal.open{transform:translateY(0);transition:transform .3s ease-in-out}.modal-content{width:40vw;text-align:right}.privacy-modal h2{margin-top:0;text-align:right;font-size:2.1vw;color:#6b4f3b}.privacy-modal p{font-size:1.3vw;color:#6b4f3b}.button-container{display:flex;justify-content:flex-end;margin-top:20px}.button-container button{border:0;margin-inline-start:15px;font-size:1vw}.button-container .accept-button{background:#6b4f3b;color:#fff;padding:.5em 1em;border-radius:4px;cursor:pointer}.button-container .accept-button:hover{background:#5b4332}.button-container .decline-button{background:transparent;color:#6b4f3b;padding:0;cursor:pointer;border-bottom:1px solid #fff}.button-container .decline-button:hover{border-bottom:1px solid #6b4f3b}@media (max-width: 768px){.privacy-modal h2{font-size:8.2vw}.privacy-modal p{font-size:4.2vw}.privacy-modal .modal-content{width:80vw}.privacy-modal .button-container button{font-size:3.2vw}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: PrivacyModalComponent, isStandalone: false, selector: "privacy-modal", ngImport: i0, template: "<div class=\"privacy-modal\" [ngClass]=\"{'open': isOpen, 'closed': !isOpen}\">\n    <div class=\"modal-content\">\n      <h2>\u05D0\u05E0\u05D7\u05E0\u05D5 \u05E9\u05D5\u05DE\u05E8\u05D9\u05DD \u05E2\u05DC \u05D4\u05E4\u05E8\u05D8\u05D9\u05D5\u05EA \u05E9\u05DC\u05DA</h2>\n      <p dir=\"rtl\">\n        <span>\n            \u05D0\u05E0\u05D7\u05E0\u05D5 \u05DE\u05E9\u05DE\u05E9\u05D9\u05DD \u05D1\u05E7\u05D1\u05E6\u05D9 \n        </span>\n        <span>Cookies </span>\n        <span>\u05DB\u05D3\u05D9 \u05DC\u05E9\u05E4\u05E8 \u05D0\u05EA \u05D7\u05D5\u05D5\u05D9\u05EA \u05D4\u05D2\u05DC\u05D9\u05E9\u05D4 \u05E9\u05DC\u05DA, \u05DC\u05E0\u05EA\u05D7 \u05E9\u05D9\u05DE\u05D5\u05E9 \u05D1\u05D0\u05EA\u05E8 \u05D5\u05DC\u05D4\u05E6\u05D9\u05E2 \u05EA\u05D5\u05DB\u05DF \u05DE\u05D5\u05EA\u05D0\u05DD \u05D0\u05D9\u05E9\u05D9\u05EA.</span>\n        <span> \u05DC\u05DE\u05D9\u05D3\u05E2 \u05E0\u05D5\u05E1\u05E3 \u05E2\u05DC \u05D0\u05D9\u05DA \u05D0\u05E0\u05D7\u05E0\u05D5 \u05DE\u05E9\u05EA\u05DE\u05E9\u05D9\u05DD \u05D1\u05DE\u05D9\u05D3\u05E2 \u05E9\u05DC\u05DA, \u05E8\u05D0\u05D4 \u05D0\u05EA <a target=\"_blank\" href=\"/privacy\">\u05DE\u05D3\u05D9\u05E0\u05D9\u05D5\u05EA \u05D4\u05E4\u05E8\u05D8\u05D9\u05D5\u05EA </a> \u05E9\u05DC\u05E0\u05D5</span>\n      </p>\n\n      <div class=\"button-container\">\n        <button class=\"accept-button\" (click)=\"onAccept()\">\u05D0\u05E0\u05D9 \u05DE\u05E1\u05DB\u05D9\u05DD</button>\n        <button class=\"decline-button\" (click)=\"onDecline()\">\u05D0\u05E0\u05D9 \u05DC\u05D0 \u05DE\u05E1\u05DB\u05D9\u05DD</button>\n      </div>\n    </div>\n</div>\n", styles: [".privacy-modal{padding:2em;background:#fff;border-radius:8px;position:fixed;z-index:10000000000000;bottom:0;left:0;right:0;height:25vh;display:flex;align-items:center;justify-content:center;transform:translateY(100%);transition:transform .3s ease-in-out}.privacy-modal.open{transform:translateY(0);transition:transform .3s ease-in-out}.modal-content{width:40vw;text-align:right}.privacy-modal h2{margin-top:0;text-align:right;font-size:2.1vw;color:#6b4f3b}.privacy-modal p{font-size:1.3vw;color:#6b4f3b}.button-container{display:flex;justify-content:flex-end;margin-top:20px}.button-container button{border:0;margin-inline-start:15px;font-size:1vw}.button-container .accept-button{background:#6b4f3b;color:#fff;padding:.5em 1em;border-radius:4px;cursor:pointer}.button-container .accept-button:hover{background:#5b4332}.button-container .decline-button{background:transparent;color:#6b4f3b;padding:0;cursor:pointer;border-bottom:1px solid #fff}.button-container .decline-button:hover{border-bottom:1px solid #6b4f3b}@media (max-width: 768px){.privacy-modal h2{font-size:8.2vw}.privacy-modal p{font-size:4.2vw}.privacy-modal .modal-content{width:80vw}.privacy-modal .button-container button{font-size:3.2vw}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrivacyModalComponent, decorators: [{
             type: Component,
@@ -948,6 +960,771 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     args: [PLATFORM_ID]
                 }] }] });
 
+const IS_PREVIEW = new InjectionToken('IS_PREVIEW');
+const IOX_BUILDER_EVENTS = new InjectionToken('IOX_BUILDER_EVENTS');
+
+class BuilderImageComponent {
+    constructor() {
+        this.src = 'https://placehold.co/600x400?text=Image';
+        this.alt = 'Image';
+        this.objectFit = 'cover';
+        this.nodeId = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BuilderImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BuilderImageComponent, isStandalone: false, selector: "app-builder-image", inputs: { src: "src", alt: "alt", objectFit: "objectFit", nodeId: "nodeId" }, ngImport: i0, template: `
+        <img [src]="src" [alt]="alt" [ngClass]="'iox-node-' + nodeId" [style.object-fit]="objectFit" />
+    `, isInline: true, styles: ["img{display:block;max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BuilderImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-builder-image', template: `
+        <img [src]="src" [alt]="alt" [ngClass]="'iox-node-' + nodeId" [style.object-fit]="objectFit" />
+    `, standalone: false, styles: ["img{display:block;max-width:100%}\n"] }]
+        }], propDecorators: { src: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], objectFit: [{
+                type: Input
+            }], nodeId: [{
+                type: Input
+            }] } });
+
+class BuilderSpacerComponent {
+    constructor() {
+        this.nodeId = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BuilderSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BuilderSpacerComponent, isStandalone: false, selector: "app-builder-spacer", inputs: { nodeId: "nodeId" }, ngImport: i0, template: `<div class="iox-spacer" [ngClass]="'iox-node-' + nodeId"></div>`, isInline: true, styles: [".iox-spacer{display:block;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BuilderSpacerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-builder-spacer', template: `<div class="iox-spacer" [ngClass]="'iox-node-' + nodeId"></div>`, standalone: false, styles: [".iox-spacer{display:block;flex-shrink:0}\n"] }]
+        }], propDecorators: { nodeId: [{
+                type: Input
+            }] } });
+
+class CardComponent {
+    constructor() {
+        this.title = '';
+        this.image = '';
+        this.description = '';
+        this.nodeId = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CardComponent, isStandalone: false, selector: "app-card", inputs: { title: "title", image: "image", description: "description", nodeId: "nodeId" }, ngImport: i0, template: `
+        <div class="card" [ngClass]="'iox-node-' + nodeId">
+            <div class="image-wrapper">
+                <img [src]="image" alt="Card image" class="card-img">
+            </div>
+            <h2>{{ title }}</h2>
+            <p>{{ description }}</p>
+        </div>
+    `, isInline: true, styles: [".image-wrapper{width:100%;aspect-ratio:1/1;overflow:hidden;margin-bottom:.75rem}\n", ".card-img{width:100%;height:100%;object-fit:cover}\n", "h2{margin:0 0 .5rem;font-size:1.2rem}\n", "p{margin:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-card', template: `
+        <div class="card" [ngClass]="'iox-node-' + nodeId">
+            <div class="image-wrapper">
+                <img [src]="image" alt="Card image" class="card-img">
+            </div>
+            <h2>{{ title }}</h2>
+            <p>{{ description }}</p>
+        </div>
+    `, standalone: false, styles: [".image-wrapper{width:100%;aspect-ratio:1/1;overflow:hidden;margin-bottom:.75rem}\n", ".card-img{width:100%;height:100%;object-fit:cover}\n", "h2{margin:0 0 .5rem;font-size:1.2rem}\n", "p{margin:0}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], image: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], nodeId: [{
+                type: Input
+            }] } });
+
+class BuilderDividerComponent {
+    constructor() {
+        this.nodeId = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BuilderDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BuilderDividerComponent, isStandalone: false, selector: "app-builder-divider", inputs: { nodeId: "nodeId" }, ngImport: i0, template: `<div class="iox-divider" [ngClass]="'iox-node-' + nodeId"></div>`, isInline: true, styles: [".iox-divider{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BuilderDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-builder-divider', template: `<div class="iox-divider" [ngClass]="'iox-node-' + nodeId"></div>`, standalone: false, styles: [".iox-divider{box-sizing:border-box}\n"] }]
+        }], propDecorators: { nodeId: [{
+                type: Input
+            }] } });
+
+class BuilderIconComponent {
+    constructor() {
+        /** Full Phosphor icon CSS class string, e.g. "ph-thin ph-star" */
+        this.iconClass = 'ph-thin ph-star';
+        this.nodeId = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BuilderIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BuilderIconComponent, isStandalone: false, selector: "app-builder-icon", inputs: { iconClass: "iconClass", nodeId: "nodeId" }, ngImport: i0, template: `<i [ngClass]="[iconClass, 'iox-node-' + nodeId]"></i>`, isInline: true, styles: ["i{display:inline-block;line-height:1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BuilderIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-builder-icon', template: `<i [ngClass]="[iconClass, 'iox-node-' + nodeId]"></i>`, standalone: false, styles: ["i{display:inline-block;line-height:1}\n"] }]
+        }], propDecorators: { iconClass: [{
+                type: Input
+            }], nodeId: [{
+                type: Input
+            }] } });
+
+class BuilderLinkComponent {
+    constructor(isPreview) {
+        this.isPreview = isPreview;
+        this.label = 'Click here';
+        this.linkType = 'external';
+        this.url = 'https://';
+        this.pageRoute = '';
+        this.target = '_self';
+        this.style = {};
+    }
+    get resolvedHref() {
+        if (this.linkType !== 'page')
+            return this.url || '#';
+        return this.pageRoute || '#';
+    }
+    onLinkClick(event) {
+        if (!this.isPreview) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BuilderLinkComponent, deps: [{ token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BuilderLinkComponent, isStandalone: false, selector: "app-builder-link", inputs: { label: "label", linkType: "linkType", url: "url", pageRoute: "pageRoute", target: "target", style: "style" }, ngImport: i0, template: `
+        <a [href]="isPreview ? resolvedHref : null"
+           [attr.target]="isPreview ? target : null"
+           [ngStyle]="style"
+           [style.pointerEvents]="isPreview ? '' : 'none'"
+           class="builder-link"
+           (click)="onLinkClick($event)">
+            {{ label }}
+        </a>
+    `, isInline: true, styles: [".builder-link{display:inline;cursor:pointer;color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BuilderLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-builder-link', template: `
+        <a [href]="isPreview ? resolvedHref : null"
+           [attr.target]="isPreview ? target : null"
+           [ngStyle]="style"
+           [style.pointerEvents]="isPreview ? '' : 'none'"
+           class="builder-link"
+           (click)="onLinkClick($event)">
+            {{ label }}
+        </a>
+    `, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".builder-link{display:inline;cursor:pointer;color:inherit}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IS_PREVIEW]
+                }] }], propDecorators: { label: [{
+                type: Input
+            }], linkType: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], pageRoute: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }] } });
+
+class BuilderButtonComponent {
+    constructor(events) {
+        this.events = events;
+        this.label = 'Click me';
+        this.link = '#';
+        this.variant = 'primary';
+        this.nodeId = '';
+        this.node = null;
+        this.editing = false;
+    }
+    ngOnInit() { }
+    startEdit(event) {
+        if (this.isBound('label'))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.editing = true;
+        setTimeout(() => event.target.focus());
+    }
+    commitEdit(event) {
+        if (!this.editing)
+            return;
+        this.editing = false;
+        const newValue = event.target.innerText.trim();
+        this.label = newValue;
+        this.syncTraitToPanel('label', newValue);
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            event.target.blur();
+        }
+        if (event.key === 'Escape') {
+            this.editing = false;
+            event.target.blur();
+        }
+        event.stopPropagation();
+    }
+    isBound(prop) {
+        return (this.node?.bindings || []).some(b => b.prop === prop);
+    }
+    syncTraitToPanel(prop, value) {
+        if (!this.node || !this.events)
+            return;
+        const trait = (this.node.traits || []).find(t => t.name === prop);
+        if (trait) {
+            trait.default = value;
+        }
+        this.events.emit('elementselect', { node: this.node, componentRef: null });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BuilderButtonComponent, deps: [{ token: IOX_BUILDER_EVENTS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BuilderButtonComponent, isStandalone: false, selector: "app-builder-button", inputs: { label: "label", link: "link", variant: "variant", nodeId: "nodeId", node: "node" }, ngImport: i0, template: `
+        <a [href]="link" class="builder-btn" [ngClass]="['variant-' + variant, 'iox-node-' + nodeId]"
+           [attr.contenteditable]="editing ? 'true' : null"
+           (dblclick)="startEdit($event)"
+           (blur)="commitEdit($event)"
+           (keydown)="onKeyDown($event)">
+            {{ label }}
+        </a>
+    `, isInline: true, styles: [".builder-btn{display:inline-block;padding:.6rem 1.5rem;border-radius:6px;font-size:.9rem;text-decoration:none;cursor:pointer;text-align:center;transition:opacity .15s}.variant-primary{background:#cb9090;color:#fff;border:1px solid #cb9090}.variant-outlined{background:transparent;color:#cb9090;border:1px solid #cb9090}.variant-text{background:transparent;color:#cb9090;border:1px solid transparent}[contenteditable]{outline:2px solid #cb9090;cursor:text}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BuilderButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-builder-button', template: `
+        <a [href]="link" class="builder-btn" [ngClass]="['variant-' + variant, 'iox-node-' + nodeId]"
+           [attr.contenteditable]="editing ? 'true' : null"
+           (dblclick)="startEdit($event)"
+           (blur)="commitEdit($event)"
+           (keydown)="onKeyDown($event)">
+            {{ label }}
+        </a>
+    `, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".builder-btn{display:inline-block;padding:.6rem 1.5rem;border-radius:6px;font-size:.9rem;text-decoration:none;cursor:pointer;text-align:center;transition:opacity .15s}.variant-primary{background:#cb9090;color:#fff;border:1px solid #cb9090}.variant-outlined{background:transparent;color:#cb9090;border:1px solid #cb9090}.variant-text{background:transparent;color:#cb9090;border:1px solid transparent}[contenteditable]{outline:2px solid #cb9090;cursor:text}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IOX_BUILDER_EVENTS]
+                }] }], propDecorators: { label: [{
+                type: Input
+            }], link: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], nodeId: [{
+                type: Input
+            }], node: [{
+                type: Input
+            }] } });
+
+class BuilderHeadingComponent {
+    constructor(events, cdr) {
+        this.events = events;
+        this.cdr = cdr;
+        this.content = 'Heading';
+        this.level = 'h2';
+        this.nodeId = '';
+        this.node = null;
+        this.editing = false;
+    }
+    ngOnInit() { }
+    onMouseDown(event) {
+        if (this.editing) {
+            event.stopPropagation();
+        }
+    }
+    startEdit(event) {
+        if (this.isBound('content'))
+            return;
+        event.stopPropagation();
+        this.editing = true;
+        this.cdr.detectChanges();
+        this.cdr.detach();
+        const el = event.target;
+        setTimeout(() => { el.focus(); });
+    }
+    commitEdit(event) {
+        if (!this.editing)
+            return;
+        this.editing = false;
+        const newValue = event.target.innerText;
+        this.content = newValue;
+        this.cdr.reattach();
+        this.syncTraitToPanel('content', newValue);
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            event.target.blur();
+        }
+        if (event.key === 'Escape') {
+            this.editing = false;
+            this.cdr.reattach();
+            event.target.blur();
+        }
+        event.stopPropagation();
+    }
+    isBound(prop) {
+        return (this.node?.bindings || []).some(b => b.prop === prop);
+    }
+    syncTraitToPanel(prop, value) {
+        if (!this.node || !this.events)
+            return;
+        const trait = (this.node.traits || []).find(t => t.name === prop);
+        if (trait) {
+            trait.default = value;
+        }
+        this.events.emit('elementselect', { node: this.node, componentRef: null, isCanvasUpdate: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "20.3.15", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IOX_BUILDER_EVENTS]
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { content: [{
+                type: Input
+            }], level: [{
+                type: Input
+            }], nodeId: [{
+                type: Input
+            }], node: [{
+                type: Input
+            }] } });
+
+class TextBlockComponent {
+    constructor(events, cdr) {
+        this.events = events;
+        this.cdr = cdr;
+        this.content = 'Enter text here';
+        this.tag = 'p';
+        this.style = {};
+        this.nodeId = '';
+        this.node = null;
+        this.editing = false;
+    }
+    ngOnInit() { }
+    onMouseDown(event) {
+        if (this.editing) {
+            event.stopPropagation();
+        }
+    }
+    startEdit(event) {
+        if (this.isBound('content'))
+            return;
+        event.stopPropagation();
+        this.editing = true;
+        this.cdr.detectChanges();
+        this.cdr.detach();
+        const el = event.target;
+        setTimeout(() => { el.focus(); });
+    }
+    commitEdit(event) {
+        if (!this.editing)
+            return;
+        this.editing = false;
+        const newValue = event.target.innerText;
+        this.content = newValue;
+        this.cdr.reattach();
+        this.syncTraitToPanel('content', newValue);
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            event.target.blur();
+        }
+        if (event.key === 'Escape') {
+            this.editing = false;
+            this.cdr.reattach();
+            event.target.blur();
+        }
+        event.stopPropagation();
+    }
+    isBound(prop) {
+        return (this.node?.bindings || []).some(b => b.prop === prop);
+    }
+    syncTraitToPanel(prop, value) {
+        if (!this.node || !this.events)
+            return;
+        const trait = (this.node.traits || []).find(t => t.name === prop);
+        if (trait) {
+            trait.default = value;
+        }
+        this.events.emit('elementselect', { node: this.node, componentRef: null, isCanvasUpdate: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "20.3.15", 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"
+               (mousedown)="onMouseDown($event)"
+               (dblclick)="startEdit($event)"
+               (blur)="commitEdit($event)"
+               (keydown)="onKeyDown($event)">{{ content }}</p>
+            <span *ngSwitchCase="'span'"
+               [ngClass]="'iox-node-' + nodeId"
+               [attr.contenteditable]="editing ? 'true' : null"
+               (mousedown)="onMouseDown($event)"
+               (dblclick)="startEdit($event)"
+               (blur)="commitEdit($event)"
+               (keydown)="onKeyDown($event)">{{ content }}</span>
+        </ng-container>
+    `, isInline: true, styles: ["p,span{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]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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"
+               (mousedown)="onMouseDown($event)"
+               (dblclick)="startEdit($event)"
+               (blur)="commitEdit($event)"
+               (keydown)="onKeyDown($event)">{{ content }}</p>
+            <span *ngSwitchCase="'span'"
+               [ngClass]="'iox-node-' + nodeId"
+               [attr.contenteditable]="editing ? 'true' : null"
+               (mousedown)="onMouseDown($event)"
+               (dblclick)="startEdit($event)"
+               (blur)="commitEdit($event)"
+               (keydown)="onKeyDown($event)">{{ content }}</span>
+        </ng-container>
+    `, standalone: false, styles: ["p,span{margin:0}[contenteditable]{outline:none;cursor:text}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IOX_BUILDER_EVENTS]
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { content: [{
+                type: Input
+            }], tag: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], nodeId: [{
+                type: Input
+            }], node: [{
+                type: Input
+            }] } });
+
+class SectionComponent {
+    constructor() {
+        this.nodeId = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SectionComponent, isStandalone: false, selector: "iox-section", inputs: { nodeId: "nodeId" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
+        <div class="section-root" [ngClass]="['iox-node-' + nodeId]">
+            <ng-container #childrenHost></ng-container>
+        </div>
+    `, isInline: true, styles: [".section-root{position:relative;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'iox-section', template: `
+        <div class="section-root" [ngClass]="['iox-node-' + nodeId]">
+            <ng-container #childrenHost></ng-container>
+        </div>
+    `, standalone: false, styles: [".section-root{position:relative;box-sizing:border-box}\n"] }]
+        }], propDecorators: { nodeId: [{
+                type: Input
+            }], childrenHost: [{
+                type: ViewChild,
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
+class ContainerComponent {
+    constructor() {
+        this.nodeId = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ContainerComponent, isStandalone: false, selector: "iox-container", inputs: { nodeId: "nodeId" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
+        <div class="container-root" [ngClass]="['iox-node-' + nodeId]">
+            <ng-container #childrenHost></ng-container>
+        </div>
+    `, isInline: true, styles: [".container-root{position:relative;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'iox-container', template: `
+        <div class="container-root" [ngClass]="['iox-node-' + nodeId]">
+            <ng-container #childrenHost></ng-container>
+        </div>
+    `, standalone: false, styles: [".container-root{position:relative;box-sizing:border-box}\n"] }]
+        }], propDecorators: { nodeId: [{
+                type: Input
+            }], childrenHost: [{
+                type: ViewChild,
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
+class LinkedContainerComponent {
+    constructor(elRef, isPreview) {
+        this.elRef = elRef;
+        this.isPreview = isPreview;
+        this.nodeId = '';
+        this.linkType = 'external';
+        this.url = 'https://';
+        this.pageRoute = '';
+        this.target = '_self';
+        this.capturePreventDefault = (e) => e.preventDefault();
+    }
+    ngOnInit() {
+        if (!this.isPreview) {
+            this.elRef.nativeElement.addEventListener('click', this.capturePreventDefault, true);
+        }
+    }
+    ngOnDestroy() {
+        if (!this.isPreview) {
+            this.elRef.nativeElement.removeEventListener('click', this.capturePreventDefault, true);
+        }
+    }
+    get resolvedHref() {
+        if (this.linkType !== 'page')
+            return this.url || '#';
+        return this.pageRoute || '#';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "20.3.15", type: LinkedContainerComponent, isStandalone: false, selector: "iox-linked-container", inputs: { nodeId: "nodeId", linkType: "linkType", url: "url", pageRoute: "pageRoute", target: "target" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
+        <a [href]="resolvedHref"
+           [target]="target"
+           [ngClass]="['iox-node-' + nodeId]"
+           class="linked-container-root">
+            <ng-container #childrenHost></ng-container>
+        </a>
+    `, isInline: true, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LinkedContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'iox-linked-container', template: `
+        <a [href]="resolvedHref"
+           [target]="target"
+           [ngClass]="['iox-node-' + nodeId]"
+           class="linked-container-root">
+            <ng-container #childrenHost></ng-container>
+        </a>
+    `, standalone: false, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IS_PREVIEW]
+                }] }], propDecorators: { nodeId: [{
+                type: Input
+            }], linkType: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], pageRoute: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], childrenHost: [{
+                type: ViewChild,
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
+/**
+ * Client-engine repeater shell. Data fetching and item expansion are handled
+ * by DataSourceResolverService + BindingApplicatorService in the PageResolver
+ * before this component is rendered. ClientRenderDirective inserts one child
+ * per resolved item into childrenHost.
+ */
+class ClientRepeaterComponent {
+    constructor() {
+        this.nodeId = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ClientRepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ClientRepeaterComponent, isStandalone: false, selector: "iox-repeater", inputs: { nodeId: "nodeId" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
+        <div class="repeater-root" [ngClass]="['iox-node-' + nodeId]">
+            <ng-container #childrenHost></ng-container>
+        </div>
+    `, isInline: true, styles: [".repeater-root{position:relative;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ClientRepeaterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'iox-repeater', template: `
+        <div class="repeater-root" [ngClass]="['iox-node-' + nodeId]">
+            <ng-container #childrenHost></ng-container>
+        </div>
+    `, standalone: false, styles: [".repeater-root{position:relative;box-sizing:border-box}\n"] }]
+        }], propDecorators: { nodeId: [{
+                type: Input
+            }], childrenHost: [{
+                type: ViewChild,
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
+const COMPONENTS = [
+    BuilderImageComponent,
+    BuilderSpacerComponent,
+    CardComponent,
+    BuilderDividerComponent,
+    BuilderIconComponent,
+    BuilderLinkComponent,
+    BuilderButtonComponent,
+    BuilderHeadingComponent,
+    TextBlockComponent,
+    SectionComponent,
+    ContainerComponent,
+    LinkedContainerComponent,
+    ClientRepeaterComponent,
+];
+class IoxBuilderComponentsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IoxBuilderComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: IoxBuilderComponentsModule, declarations: [BuilderImageComponent,
+            BuilderSpacerComponent,
+            CardComponent,
+            BuilderDividerComponent,
+            BuilderIconComponent,
+            BuilderLinkComponent,
+            BuilderButtonComponent,
+            BuilderHeadingComponent,
+            TextBlockComponent,
+            SectionComponent,
+            ContainerComponent,
+            LinkedContainerComponent,
+            ClientRepeaterComponent], imports: [CommonModule], exports: [BuilderImageComponent,
+            BuilderSpacerComponent,
+            CardComponent,
+            BuilderDividerComponent,
+            BuilderIconComponent,
+            BuilderLinkComponent,
+            BuilderButtonComponent,
+            BuilderHeadingComponent,
+            TextBlockComponent,
+            SectionComponent,
+            ContainerComponent,
+            LinkedContainerComponent,
+            ClientRepeaterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IoxBuilderComponentsModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IoxBuilderComponentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: COMPONENTS,
+                    imports: [CommonModule],
+                    exports: COMPONENTS,
+                }]
+        }] });
+
+/**
+ * Single source of truth for the IOX component type → Angular class mapping.
+ * Used by the client engine (iox-client-engine) to resolve component classes
+ * from IoxLayoutNode.type strings at render time.
+ *
+ * All 13 builder components are registered here:
+ * - Leaf (Phase 2a): Image, Spacer, Card, Divider, Icon
+ * - Inline-editable (Phase 2b): Link, Button, Heading, Text
+ * - Layout shells (Phase 2c): Section, Container, LinkedContainer
+ * - Repeater (Phase 2d): ClientRepeaterComponent
+ *
+ * Section/Container/LinkedContainer/Repeater expose childrenHost: ViewContainerRef
+ * for ClientRenderDirective to insert child components into.
+ */
+class IoxComponentRegistryService {
+    constructor() {
+        this.map = new Map([
+            ['Image', BuilderImageComponent],
+            ['Spacer', BuilderSpacerComponent],
+            ['Card', CardComponent],
+            ['Divider', BuilderDividerComponent],
+            ['Icon', BuilderIconComponent],
+            ['Link', BuilderLinkComponent],
+            ['Button', BuilderButtonComponent],
+            ['Heading', BuilderHeadingComponent],
+            ['Text', TextBlockComponent],
+            ['Section', SectionComponent],
+            ['Container', ContainerComponent],
+            ['LinkedContainer', LinkedContainerComponent],
+            ['Repeater', ClientRepeaterComponent],
+        ]);
+    }
+    getComponent(type) {
+        return this.map.get(type);
+    }
+    hasComponent(type) {
+        return this.map.has(type);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IoxComponentRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IoxComponentRegistryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IoxComponentRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /*
  * Public API Surface of iox-ui
  */
@@ -956,5 +1733,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AOSService, AnalyticsService, CMSClientInfraModule, ConsentService, ContentService, ENVIRONMENT, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxMasonryComponent, IoxMasonryItemDirective, IoxMasonryModule, IoxMasonryService, IoxPageComponent, IoxPageModule, IoxUiModule, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, ViewPositionDirective, ViewPositionModule, WebSettingsService };
+export { AOSService, AnalyticsService, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, CMSClientInfraModule, CardComponent, ClientRepeaterComponent, ConsentService, ContainerComponent, ContentService, ENVIRONMENT, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxMasonryComponent, IoxMasonryItemDirective, IoxMasonryModule, IoxMasonryService, IoxPageComponent, IoxPageModule, IoxUiModule, LinkedContainerComponent, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, SectionComponent, TextBlockComponent, ViewPositionDirective, ViewPositionModule, WebSettingsService };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map