@vectoriox/iox-builder 2.1.2 → 2.2.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -17,7 +17,7 @@ import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i16 from '@vectoriox/iox-ui';
-import { ComponentInstanceRegistryService, DEFAULT_WIDTH_BY_TYPE, compileDeclarations, composeVirtualTraits, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, IoxPageModule } from '@vectoriox/iox-ui';
+import { ComponentInstanceRegistryService, DEFAULT_WIDTH_BY_TYPE, compileDeclarations, composeVirtualTraits, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, IoxPageModule } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of } from 'rxjs';
@@ -2374,6 +2374,24 @@ function flattenSchemaFields(properties, prefix = '') {
     }
     return result;
 }
+/**
+ * The ARRAY (repeatable) properties of a schema — used by the Bindings panel to auto-suggest which
+ * property of a SINGLE resource a Repeater can iterate over (e.g. `product.gallery`). A field is
+ * repeatable when its schema `type` is `embedded`/`array` (an embedded list) or it is a MANY
+ * relation (`rel.type` contains "many", case-insensitive). Top-level only — the repeat target is a
+ * property of the resource, not a deep leaf.
+ */
+function arraySchemaFields(properties) {
+    const out = [];
+    for (const [key, field] of Object.entries(properties ?? {})) {
+        const type = (field?.type ?? '').toString().toLowerCase();
+        const relType = (field?.rel?.type ?? '').toString().toLowerCase();
+        if (type === 'embedded' || type === 'array' || (type === 'rel' && relType.includes('many'))) {
+            out.push({ label: key, value: key });
+        }
+    }
+    return out;
+}
 
 /**
  * StyleRegistryService — manages a single <style> tag for the builder canvas.
@@ -5660,7 +5678,15 @@ class BuilderDataSourceService {
     }
     /** Same fetch, always as an array — for the canvas components that repeat over the source. */
     fetchItems(ds) {
-        return this.fetch(ds).pipe(map(value => Array.isArray(value) ? value : (value === null || value === undefined ? [] : [value])));
+        return this.fetchRepeaterItems(ds);
+    }
+    /**
+     * Items a Repeater/Slider iterates over. With `sourcePath` it repeats over an array PROPERTY of a
+     * SINGLE-resource source (e.g. `product.gallery`); without it the source itself is the list.
+     * Uses the SHARED `resolveRepeaterItems` so the canvas preview matches the SSR engine.
+     */
+    fetchRepeaterItems(ds, sourcePath) {
+        return this.fetch(ds).pipe(map(value => resolveRepeaterItems(value, sourcePath)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderDataSourceService, deps: [{ token: i1.HttpClient }, { token: IOX_DATA_SOURCE_ENDPOINTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderDataSourceService }); }
@@ -5725,6 +5751,17 @@ class BuilderRepeaterComponent {
             this.previewRows = [];
         }
     }
+    /** Optional array PROPERTY inside a single-resource source to repeat over (e.g. `gallery`). */
+    get sourcePath() { return this._sourcePath; }
+    set sourcePath(value) {
+        const next = value ?? '';
+        if (next === this._sourcePath)
+            return;
+        this._sourcePath = next;
+        if (this._source) {
+            this.fetchData();
+        }
+    }
     get limit() { return this._limit; }
     set limit(value) {
         if (value === this._limit)
@@ -5754,6 +5791,7 @@ class BuilderRepeaterComponent {
         /** Bound reference passed to [ioxDropzonePostDrop] so the directive can call it. */
         this.refreshPreviewsBound = () => { setTimeout(() => this.refreshPreviews()); };
         this._source = '';
+        this._sourcePath = '';
         this._limit = 10;
     }
     ngOnInit() {
@@ -5782,7 +5820,9 @@ class BuilderRepeaterComponent {
             return;
         this.isLoading = true;
         this.cdr.markForCheck();
-        this.dataSourceService.fetchItems(this.dsRegistry.findByAlias(this._source)).subscribe(items => {
+        // sourcePath (when set) repeats over an array PROPERTY of a single-resource source
+        // (e.g. product.gallery); otherwise the source itself is the list. Shared decision.
+        this.dataSourceService.fetchRepeaterItems(this.dsRegistry.findByAlias(this._source), this._sourcePath).subscribe(items => {
             this.items = items.slice(0, this._limit);
             this.refreshPreviews();
             this.isLoading = false;
@@ -5824,7 +5864,7 @@ class BuilderRepeaterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderRepeaterComponent, deps: [{ token: DragEngineService }, { token: OverlayService }, { token: BuilderDataSourceService }, { token: DataSourceRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderRepeaterComponent, isStandalone: false, selector: "app-builder-repeater", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", source: "source", limit: "limit" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderRepeaterComponent, isStandalone: false, selector: "app-builder-repeater", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", source: "source", sourcePath: "sourcePath", limit: "limit" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
         <ng-template #badgeContent>
             <i class="ph-thin ph-repeat"></i>
             <span *ngIf="source">{{ source }}</span>
@@ -5993,6 +6033,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Output
             }], source: [{
                 type: Input
+            }], sourcePath: [{
+                type: Input
             }], limit: [{
                 type: Input
             }] } });
@@ -7843,6 +7885,17 @@ class RepeaterComponentConfig extends ComponentConfig {
                 options: [], // populated at runtime from DataSourceRegistryService aliases
                 default: '',
             },
+            {
+                // Repeat over an ARRAY PROPERTY inside a SINGLE resource (e.g. product → `gallery`).
+                // Empty for list/query sources (the source itself is the array). The Bindings panel
+                // populates the options from the resource schema's array fields when the source is a
+                // single resource. See repeater-nested-array-plan.md.
+                name: 'sourcePath',
+                label: 'Repeat over property',
+                type: TraitInputType.Select,
+                options: [], // populated at runtime from the single source's array schema fields
+                default: '',
+            },
             {
                 name: 'limit',
                 label: 'Limit',