@vectoriox/iox-builder 11.6.0 → 11.7.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -11431,13 +11431,14 @@ class BuilderDialogComponent {
         const allowed = ['center', 'top', 'bottom', 'start', 'end'];
         return allowed.indexOf(String(this.placement)) >= 0 ? String(this.placement) : 'center';
     }
-    constructor(dragEngine, instanceRegistry, overlayService, cdr, designState, panelEvents) {
+    constructor(dragEngine, instanceRegistry, overlayService, cdr, designState, panelEvents, zone) {
         this.dragEngine = dragEngine;
         this.instanceRegistry = instanceRegistry;
         this.overlayService = overlayService;
         this.cdr = cdr;
         this.designState = designState;
         this.panelEvents = panelEvents;
+        this.zone = zone;
         this.children = [];
         this.nodeId = '';
         this.dropListId = '';
@@ -11456,6 +11457,14 @@ class BuilderDialogComponent {
         /** Closed by its X / backdrop while the selection or the switcher still shows it: hidden until either changes. */
         this.dismissed = false;
     }
+    /** The canvas runs interactions OUTSIDE Angular's zone; an open / close they cause still has to reach the panels
+     *  and the toolbar that read the design state (CC1.3: the Phone menu preview, the Menu chip). */
+    inZone(fn) {
+        if (this.zone)
+            this.zone.run(fn);
+        else
+            fn();
+    }
     /** Open on the canvas right now (an exit that is playing counts as closed). */
     get isOpen() {
         return this.designOpen && !this.closing;
@@ -11559,9 +11568,9 @@ class BuilderDialogComponent {
         }
         // Open/close/toggle actions (and A1c's panel) reach the canvas twin through here.
         this.instanceRegistry.register(this.nodeId, {
-            open: () => this.openRuntime(),
-            close: () => this.closeRuntime(),
-            toggle: () => (this.isOpen ? this.closeRuntime() : this.openRuntime()),
+            open: () => this.inZone(() => this.openRuntime()),
+            close: () => this.inZone(() => this.closeRuntime()),
+            toggle: () => this.inZone(() => (this.isOpen ? this.closeRuntime() : this.openRuntime())),
             isOpen: () => this.isOpen,
         });
     }
@@ -11593,7 +11602,7 @@ class BuilderDialogComponent {
     onDrop(event) {
         this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderDialogComponent, deps: [{ token: DragEngineService }, { token: i1$1.ComponentInstanceRegistryService }, { token: OverlayService }, { token: i0.ChangeDetectorRef }, { token: CanvasDesignStateService, optional: true }, { token: PanelEventService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderDialogComponent, deps: [{ token: DragEngineService }, { token: i1$1.ComponentInstanceRegistryService }, { token: OverlayService }, { token: i0.ChangeDetectorRef }, { token: CanvasDesignStateService, optional: true }, { token: PanelEventService, optional: true }, { token: i0.NgZone, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderDialogComponent, isStandalone: false, selector: "app-builder-dialog", inputs: { children: "children", nodeId: "nodeId", dropListId: "dropListId", closeOnBackdrop: "closeOnBackdrop", showCloseButton: "showCloseButton", placement: "placement" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, viewQueries: [{ propertyName: "stageRef", first: true, predicate: ["stage"], descendants: true }], ngImport: i0, template: `
         <div *ngIf="designOpen" #stage class="dialog-stage" [attr.data-placement]="placementValue"
              (click)="onStageClick($event)">
@@ -11667,6 +11676,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                     type: Optional
                 }] }, { type: PanelEventService, decorators: [{
                     type: Optional
+                }] }, { type: i0.NgZone, decorators: [{
+                    type: Optional
                 }] }], propDecorators: { children: [{
                 type: Input
             }], nodeId: [{
@@ -13556,9 +13567,10 @@ function picture(createConfig, aspectRatio, src = '') {
     setTrait(node, 'src', src);
     return styled(node, { width: '100%', height: 'auto', aspectRatio });
 }
+const photoAt = (copy, index) => (copy.photos?.length ? copy.photos[index % copy.photos.length] : '');
 function card(copy, createConfig, index) {
     return boxed('card', createConfig, [
-        picture(createConfig, '4 / 3', index === 0 ? copy.photo : ''),
+        picture(createConfig, '4 / 3', photoAt(copy, index)),
         heading('h3', copy.cardTitle, 'h3', createConfig),
         text(copy.cardText, createConfig, 'small'),
     ], { display: 'grid', gap: '8px', alignContent: 'start', minWidth: '0' });
@@ -13583,7 +13595,7 @@ function homeView(copy, createConfig, opts) {
     const cards = Array.from({ length: CARD_COUNT }, (_, i) => card(copy, createConfig, i));
     const cardRow = withChildren(styled(box(createConfig), { display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '14px' }), cards);
     const collection = block(createConfig, SpecimenFamily.Collection, opts, [listHeading, cardRow], { [EntrancePart.Heading]: [listHeading], [EntrancePart.Items]: cards });
-    const rowPicture = picture(createConfig, '16 / 10');
+    const rowPicture = picture(createConfig, '16 / 10', photoAt(copy, 3));
     const rowHeading = heading('h2', copy.rowHeading, 'h2', createConfig);
     const rowWords = withChildren(styled(box(createConfig), { display: 'grid', gap: '10px', alignContent: 'center' }), [rowHeading, text(copy.rowText, createConfig, 'body')]);
     const feature = block(createConfig, SpecimenFamily.Feature, opts, [rowPicture, rowWords], { [EntrancePart.Heading]: [rowHeading], [EntrancePart.RowMedia]: [rowPicture] }, { gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 1fr)', gap: '18px', alignItems: 'start' });
@@ -13599,7 +13611,7 @@ function homeView(copy, createConfig, opts) {
 }
 function itemView(copy, createConfig, opts) {
     const title = heading('display', copy.cardTitle, 'h1', createConfig);
-    const media = picture(createConfig, '16 / 8', copy.photo);
+    const media = picture(createConfig, '16 / 8', copy.photos?.[0]);
     return [block(createConfig, SpecimenFamily.Detail, opts, [text(copy.listHeading, createConfig, 'eyebrow'), title, media, text(copy.cardText, createConfig, 'lead')], { [EntrancePart.Heading]: [title], [EntrancePart.Media]: [media] })];
 }
 /**