@vectoriox/iox-builder 1.4.93 → 1.4.95

package/fesm2022/vectoriox-iox-builder.mjs

@@ -5440,10 +5440,39 @@ class SliderContainerComponent {
         // the nav buttons (position:absolute) are anchored to THIS element, not a canvas ancestor.
         return { ...this.style, position: 'relative' };
     }
-    constructor(dragEngine, cdr, isPreview) {
+    get source() { return this._source; }
+    set source(value) {
+        if (value === this._source)
+            return;
+        this._source = value;
+        if (value) {
+            this.fetchData();
+        }
+        else {
+            this.items = [];
+            this.previewSlides = [];
+            this._scheduleReinit();
+        }
+    }
+    get limit() { return this._limit; }
+    set limit(value) {
+        if (value === this._limit)
+            return;
+        this._limit = value;
+        if (this._source) {
+            this.fetchData();
+        }
+    }
+    constructor(dragEngine, cdr, isPreview, overlayService, contentService, shopContentService, dsRegistry, panelEventService, activatedRoute) {
         this.dragEngine = dragEngine;
         this.cdr = cdr;
         this.isPreview = isPreview;
+        this.overlayService = overlayService;
+        this.contentService = contentService;
+        this.shopContentService = shopContentService;
+        this.dsRegistry = dsRegistry;
+        this.panelEventService = panelEventService;
+        this.activatedRoute = activatedRoute;
         this.children = [];
         this.style = {};
         this.nodeId = '';
@@ -5490,16 +5519,37 @@ class SliderContainerComponent {
         this.gridRows = 2;
         // ── Responsive ─────────────────────────────────────────────────────────────
         this.breakpoints = '';
+        // ── Data binding ───────────────────────────────────────────────────────────
+        this._source = '';
+        this._limit = 10;
+        this.items = [];
+        this.previewSlides = [];
+        this.isLoading = false;
         this.childClick = new EventEmitter();
         this.childMouseEnter = new EventEmitter();
         this.childMouseLeave = new EventEmitter();
         this._swiper = null;
         this._initRafId = 0;
+        this._orgId = 'default';
         this.instanceRegistry = inject(ComponentInstanceRegistryService);
         this.interactionEngine = inject(InteractionEngineService);
         this.isPreview = !!isPreview;
     }
-    ngOnInit() { }
+    ngOnInit() {
+        this._orgId = this.activatedRoute?.snapshot.paramMap.get('orgId') || 'default';
+        if (this.panelEventService) {
+            this._bindingSub = this.panelEventService.subscribe(event => {
+                if (event.type !== PanelEventTypes.BINDING_CHANGED)
+                    return;
+                const changedNode = event.data?.node;
+                if (!changedNode || !this.items.length || !this._source)
+                    return;
+                if (this._isInTemplate(changedNode)) {
+                    this.refreshPreviews();
+                }
+            });
+        }
+    }
     ngAfterViewInit() {
         this._initRafId = requestAnimationFrame(() => this._initSwiper());
     }
@@ -5517,7 +5567,7 @@ class SliderContainerComponent {
             'autoplayDelay', 'autoplayPauseOnMouseEnter', 'autoplayDisableOnInteraction',
             'gridRows',
         ]);
-        // Edit mode also reinits when children change (new slide added)
+        // Edit mode also reinits when children change (new slide added or removed)
         const editKeys = new Set([...previewKeys, 'children']);
         const relevantKeys = this.isPreview ? previewKeys : editKeys;
         const hasConfigChange = Object.keys(changes).some(k => relevantKeys.has(k));
@@ -5530,14 +5580,96 @@ class SliderContainerComponent {
     ngOnDestroy() {
         cancelAnimationFrame(this._initRafId);
         this._destroySwiper();
+        this._bindingSub?.unsubscribe();
+    }
+    trackByNodeId(_index, node) {
+        return node.id ?? String(_index);
     }
     onDrop(event) {
+        if (this._source)
+            return; // repeat mode: drops disabled, slides come from data source
         this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
         // Sync Swiper's internal slide list after drag-drop reorder
         if (this._swiper) {
             requestAnimationFrame(() => this._swiper?.update());
         }
     }
+    // ── Data fetching ───────────────────────────────────────────────────────────
+    fetchData() {
+        if (!this._source || !this.dsRegistry)
+            return;
+        const ds = this.dsRegistry.findByAlias(this._source);
+        const isShop = ds?.type === DataSourceType.Shop;
+        const contentType = isShop ? ds?.request?.shop?.contentType : ds?.request?.cms?.contentType;
+        const service = isShop ? this.shopContentService : this.contentService;
+        if (!contentType || !service)
+            return;
+        this.isLoading = true;
+        this.cdr.markForCheck();
+        service.getContent(contentType, this._orgId).subscribe({
+            next: (data) => {
+                const all = Array.isArray(data) ? data : (data?.items || data?.data || []);
+                this.items = all.slice(0, this._limit);
+                this.refreshPreviews();
+                this.isLoading = false;
+                this.cdr.markForCheck();
+            },
+            error: () => {
+                this.isLoading = false;
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    refreshPreviews() {
+        if (!this.items.length || !this.children.length) {
+            this.previewSlides = [];
+            this.cdr.markForCheck();
+            this._scheduleReinit();
+            return;
+        }
+        this.applyFirstItemToTemplate();
+        // Each preview slide = one cloned SliderSlide node with item data resolved
+        this.previewSlides = this.items.slice(1).map(item => cloneNodesForItem([this.children[0]], item)[0]);
+        this.cdr.markForCheck();
+        this._scheduleReinit();
+    }
+    applyFirstItemToTemplate() {
+        const item = this.items[0];
+        if (!item || !this.children.length || !this.overlayService)
+            return;
+        // Bindings live on leaf nodes inside the template slide, so recurse into the tree
+        this.applyItemToNodes([this.children[0]], item);
+    }
+    applyItemToNodes(nodes, item) {
+        for (const node of nodes) {
+            if (node.bindings?.length) {
+                const ref = this.overlayService.getNodeRef(node);
+                if (ref?.componentRef) {
+                    for (const binding of node.bindings) {
+                        const value = resolvePath(item, binding.path);
+                        if (value !== undefined) {
+                            ref.componentRef.instance[binding.prop] = value;
+                        }
+                    }
+                    ref.componentRef.changeDetectorRef.detectChanges();
+                }
+            }
+            if (node.children?.length) {
+                this.applyItemToNodes(node.children, item);
+            }
+        }
+    }
+    _isInTemplate(target) {
+        const search = (nodes) => nodes.some(c => c === target || c.id === target.id ||
+            (c.children?.length ? search(c.children) : false));
+        return this.children.length > 0 && search([this.children[0]]);
+    }
+    _scheduleReinit() {
+        this._destroySwiper();
+        this.cdr.detectChanges();
+        this._initRafId = requestAnimationFrame(() => this._initSwiper());
+    }
+    // ── Swiper lifecycle ────────────────────────────────────────────────────────
     async _initSwiper() {
         const el = this.isPreview ? this.swiperEl?.nativeElement : this.editSwiperEl?.nativeElement;
         if (!el)
@@ -5671,44 +5803,87 @@ class SliderContainerComponent {
         if (eventName === 'swiperSlideChange') {
             const prevIdx = swiper.previousIndex;
             const activeIdx = swiper.activeIndex;
-            if (prevIdx !== undefined && this.children[prevIdx]) {
-                this.interactionEngine.replayTrigger(this.children[prevIdx].id, 'swiperSlideInactive');
+            const allSlides = this._source ? [this.children[0], ...this.previewSlides] : this.children;
+            if (prevIdx !== undefined && allSlides[prevIdx]) {
+                this.interactionEngine.replayTrigger(allSlides[prevIdx].id, 'swiperSlideInactive');
             }
-            if (this.children[activeIdx]) {
-                this.interactionEngine.replayTrigger(this.children[activeIdx].id, 'swiperSlideActive');
+            if (allSlides[activeIdx]) {
+                this.interactionEngine.replayTrigger(allSlides[activeIdx].id, 'swiperSlideActive');
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderContainerComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }, { token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SliderContainerComponent, isStandalone: false, selector: "app-slider-container", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", direction: "direction", slidesPerView: "slidesPerView", slidesPerGroup: "slidesPerGroup", loop: "loop", centeredSlides: "centeredSlides", spaceBetween: "spaceBetween", initialSlide: "initialSlide", autoHeight: "autoHeight", grabCursor: "grabCursor", slideToClickedSlide: "slideToClickedSlide", effect: "effect", speed: "speed", enableNavigation: "enableNavigation", navigationColor: "navigationColor", navigationSize: "navigationSize", enablePagination: "enablePagination", paginationColor: "paginationColor", paginationType: "paginationType", paginationClickable: "paginationClickable", paginationDynamicBullets: "paginationDynamicBullets", enableAutoplay: "enableAutoplay", autoplayDelay: "autoplayDelay", autoplayPauseOnMouseEnter: "autoplayPauseOnMouseEnter", autoplayDisableOnInteraction: "autoplayDisableOnInteraction", enableScrollbar: "enableScrollbar", freeMode: "freeMode", enableKeyboard: "enableKeyboard", enableMousewheel: "enableMousewheel", enableZoom: "enableZoom", enableParallax: "enableParallax", enableGrid: "enableGrid", gridRows: "gridRows", breakpoints: "breakpoints" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, viewQueries: [{ propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true }, { propertyName: "editSwiperEl", first: true, predicate: ["editSwiperEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderContainerComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }, { token: IS_PREVIEW, optional: true }, { token: OverlayService, optional: true }, { token: IOX_CONTENT_SERVICE, optional: true }, { token: IOX_SHOP_SERVICE, optional: true }, { token: DataSourceRegistryService, optional: true }, { token: PanelEventService, optional: true }, { token: i5.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SliderContainerComponent, isStandalone: false, selector: "app-slider-container", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", direction: "direction", slidesPerView: "slidesPerView", slidesPerGroup: "slidesPerGroup", loop: "loop", centeredSlides: "centeredSlides", spaceBetween: "spaceBetween", initialSlide: "initialSlide", autoHeight: "autoHeight", grabCursor: "grabCursor", slideToClickedSlide: "slideToClickedSlide", effect: "effect", speed: "speed", enableNavigation: "enableNavigation", navigationColor: "navigationColor", navigationSize: "navigationSize", enablePagination: "enablePagination", paginationColor: "paginationColor", paginationType: "paginationType", paginationClickable: "paginationClickable", paginationDynamicBullets: "paginationDynamicBullets", enableAutoplay: "enableAutoplay", autoplayDelay: "autoplayDelay", autoplayPauseOnMouseEnter: "autoplayPauseOnMouseEnter", autoplayDisableOnInteraction: "autoplayDisableOnInteraction", enableScrollbar: "enableScrollbar", freeMode: "freeMode", enableKeyboard: "enableKeyboard", enableMousewheel: "enableMousewheel", enableZoom: "enableZoom", enableParallax: "enableParallax", enableGrid: "enableGrid", gridRows: "gridRows", breakpoints: "breakpoints", source: "source", limit: "limit" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, viewQueries: [{ propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true }, { propertyName: "editSwiperEl", first: true, predicate: ["editSwiperEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <!-- EDIT MODE: shell wraps swiper + nav buttons so arrows position relative to slide area -->
         <div *ngIf="!isPreview"
              class="slider-edit-shell"
              [ngClass]="['iox-node-' + nodeId]"
              [ngStyle]="editShellStyle"
              ioxDropzone
-             [ioxDropzoneId]="dropListId"
+             [ioxDropzoneId]="source ? '' : dropListId"
              [ioxDropzoneData]="children"
              (ioxDrop)="onDrop($event)">
 
+            <!-- Repeat badge: hover-only, anchored top-left of shell -->
+            <div *ngIf="source" class="slider-repeat-badge">
+                <i class="ph-thin ph-repeat"></i>
+                <span>{{ source }}</span>
+                <span *ngIf="items.length" class="slider-repeat-badge-count">&times; {{ items.length }}</span>
+                <i *ngIf="isLoading" class="ph-thin ph-circle-notch slider-badge-spin"></i>
+            </div>
+
             <div #editSwiperEl class="swiper swiper-edit">
                 <div class="swiper-wrapper">
-                    <div *ngFor="let child of children"
-                         class="swiper-slide"
-                         [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
-                         ioxDraggable
-                         [ioxDragData]="child"
-                         [ioxDragSourceId]="dropListId">
-                        <ng-container
-                            [ioxRender]="child"
-                            (onClick)="childClick.emit($event)"
-                            (onMouseEnter)="childMouseEnter.emit($event)"
-                            (onMouseLeave)="childMouseLeave.emit()">
-                        </ng-container>
-                    </div>
+
+                    <!-- NORMAL MODE: all children as draggable slides -->
+                    <ng-container *ngIf="!source">
+                        <div *ngFor="let child of children"
+                             class="swiper-slide"
+                             [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
+                             ioxDraggable
+                             [ioxDragData]="child"
+                             [ioxDragSourceId]="dropListId">
+                            <ng-container
+                                [ioxRender]="child"
+                                (onClick)="childClick.emit($event)"
+                                (onMouseEnter)="childMouseEnter.emit($event)"
+                                (onMouseLeave)="childMouseLeave.emit()">
+                            </ng-container>
+                        </div>
+                    </ng-container>
+
+                    <!-- REPEAT MODE: template slide (item 0) + dimmed preview slides (items 1..N) -->
+                    <ng-container *ngIf="source">
+                        <!-- Template slide — draggable/editable, receives item[0] data -->
+                        <div *ngIf="children.length"
+                             class="swiper-slide"
+                             [ngClass]="['iox-outer-' + (children[0].styleId ?? children[0].id)]"
+                             ioxDraggable
+                             [ioxDragData]="children[0]"
+                             [ioxDragSourceId]="dropListId">
+                            <ng-container
+                                [ioxRender]="children[0]"
+                                (onClick)="childClick.emit($event)"
+                                (onMouseEnter)="childMouseEnter.emit($event)"
+                                (onMouseLeave)="childMouseLeave.emit()">
+                            </ng-container>
+                        </div>
+                        <!-- Preview slides — dimmed, non-interactive, data resolved from items 1..N -->
+                        <div *ngFor="let slide of previewSlides; trackBy: trackByNodeId"
+                             class="swiper-slide slider-preview-slide"
+                             [ngClass]="['iox-outer-' + (slide.styleId ?? slide.id)]">
+                            <ng-container
+                                [ioxRender]="slide"
+                                (onClick)="$event"
+                                (onMouseEnter)="$event"
+                                (onMouseLeave)="undefined">
+                            </ng-container>
+                        </div>
+                    </ng-container>
+
                 </div>
 
-                <div *ngIf="!children.length" class="slider-edit-placeholder">
+                <div *ngIf="!source && !children.length" class="slider-edit-placeholder">
                     <i class="ph-thin ph-sliders-horizontal"></i>
                     <span>Click + in toolbar to add a slide</span>
                 </div>
@@ -5739,12 +5914,34 @@ class SliderContainerComponent {
              [style.--swiper-navigation-size.px]="navigationSize || null"
              [style.--swiper-pagination-color]="paginationColor || null">
             <div class="swiper-wrapper">
-                <ng-container *ngFor="let child of children">
-                    <ng-container
-                        [ioxRender]="child"
-                        (onClick)="childClick.emit($event)"
-                        (onMouseEnter)="childMouseEnter.emit($event)"
-                        (onMouseLeave)="childMouseLeave.emit()">
+                <!-- NORMAL: all children (each SliderSlide renders .swiper-slide itself in preview mode) -->
+                <ng-container *ngIf="!source">
+                    <ng-container *ngFor="let child of children">
+                        <ng-container
+                            [ioxRender]="child"
+                            (onClick)="childClick.emit($event)"
+                            (onMouseEnter)="childMouseEnter.emit($event)"
+                            (onMouseLeave)="childMouseLeave.emit()">
+                        </ng-container>
+                    </ng-container>
+                </ng-container>
+                <!-- REPEAT: template slide + preview slides -->
+                <ng-container *ngIf="source">
+                    <ng-container *ngIf="children.length">
+                        <ng-container
+                            [ioxRender]="children[0]"
+                            (onClick)="childClick.emit($event)"
+                            (onMouseEnter)="childMouseEnter.emit($event)"
+                            (onMouseLeave)="childMouseLeave.emit()">
+                        </ng-container>
+                    </ng-container>
+                    <ng-container *ngFor="let slide of previewSlides; trackBy: trackByNodeId">
+                        <ng-container
+                            [ioxRender]="slide"
+                            (onClick)="childClick.emit($event)"
+                            (onMouseEnter)="childMouseEnter.emit($event)"
+                            (onMouseLeave)="childMouseLeave.emit()">
+                        </ng-container>
                     </ng-container>
                 </ng-container>
             </div>
@@ -5753,7 +5950,7 @@ class SliderContainerComponent {
             <div *ngIf="enablePagination" class="swiper-pagination"></div>
             <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
-    `, isInline: true, styles: [":host{display:block}.swiper-wrapper{height:auto}.slider-edit-shell{position:relative;display:block}.swiper-edit{width:100%}.swiper-edit .swiper-slide{position:relative}.slider-edit-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:#00000038;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:background .15s}.slider-edit-nav:hover{background:#00000073}.slider-edit-nav--prev{left:8px}.slider-edit-nav--next{right:8px}.slider-edit-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.slider-edit-placeholder i{font-size:22px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [":host{display:block}.swiper-wrapper{height:auto}.slider-edit-shell{position:relative;display:block}.swiper-edit{width:100%}.swiper-edit .swiper-slide{position:relative}.slider-edit-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:#00000038;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:background .15s}.slider-edit-nav:hover{background:#00000073}.slider-edit-nav--prev{left:8px}.slider-edit-nav--next{right:8px}.slider-edit-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.slider-edit-placeholder i{font-size:22px}.slider-repeat-badge{position:absolute;top:0;left:0;z-index:10;display:flex;align-items:center;gap:.4rem;padding:4px 8px;font-size:11px;color:#cb9090;background:#cb909014;border:1px solid rgba(203,144,144,.5);border-radius:0 0 4px;opacity:0;transition:opacity .15s;-webkit-user-select:none;user-select:none;pointer-events:none}.slider-edit-shell:hover .slider-repeat-badge{opacity:1}.slider-repeat-badge-count{font-weight:600}.slider-badge-spin{animation:slider-badge-spin 1s linear infinite}@keyframes slider-badge-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.slider-preview-slide{opacity:.55;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderContainerComponent, decorators: [{
             type: Component,
@@ -5764,28 +5961,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
              [ngClass]="['iox-node-' + nodeId]"
              [ngStyle]="editShellStyle"
              ioxDropzone
-             [ioxDropzoneId]="dropListId"
+             [ioxDropzoneId]="source ? '' : dropListId"
              [ioxDropzoneData]="children"
              (ioxDrop)="onDrop($event)">
 
+            <!-- Repeat badge: hover-only, anchored top-left of shell -->
+            <div *ngIf="source" class="slider-repeat-badge">
+                <i class="ph-thin ph-repeat"></i>
+                <span>{{ source }}</span>
+                <span *ngIf="items.length" class="slider-repeat-badge-count">&times; {{ items.length }}</span>
+                <i *ngIf="isLoading" class="ph-thin ph-circle-notch slider-badge-spin"></i>
+            </div>
+
             <div #editSwiperEl class="swiper swiper-edit">
                 <div class="swiper-wrapper">
-                    <div *ngFor="let child of children"
-                         class="swiper-slide"
-                         [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
-                         ioxDraggable
-                         [ioxDragData]="child"
-                         [ioxDragSourceId]="dropListId">
-                        <ng-container
-                            [ioxRender]="child"
-                            (onClick)="childClick.emit($event)"
-                            (onMouseEnter)="childMouseEnter.emit($event)"
-                            (onMouseLeave)="childMouseLeave.emit()">
-                        </ng-container>
-                    </div>
+
+                    <!-- NORMAL MODE: all children as draggable slides -->
+                    <ng-container *ngIf="!source">
+                        <div *ngFor="let child of children"
+                             class="swiper-slide"
+                             [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
+                             ioxDraggable
+                             [ioxDragData]="child"
+                             [ioxDragSourceId]="dropListId">
+                            <ng-container
+                                [ioxRender]="child"
+                                (onClick)="childClick.emit($event)"
+                                (onMouseEnter)="childMouseEnter.emit($event)"
+                                (onMouseLeave)="childMouseLeave.emit()">
+                            </ng-container>
+                        </div>
+                    </ng-container>
+
+                    <!-- REPEAT MODE: template slide (item 0) + dimmed preview slides (items 1..N) -->
+                    <ng-container *ngIf="source">
+                        <!-- Template slide — draggable/editable, receives item[0] data -->
+                        <div *ngIf="children.length"
+                             class="swiper-slide"
+                             [ngClass]="['iox-outer-' + (children[0].styleId ?? children[0].id)]"
+                             ioxDraggable
+                             [ioxDragData]="children[0]"
+                             [ioxDragSourceId]="dropListId">
+                            <ng-container
+                                [ioxRender]="children[0]"
+                                (onClick)="childClick.emit($event)"
+                                (onMouseEnter)="childMouseEnter.emit($event)"
+                                (onMouseLeave)="childMouseLeave.emit()">
+                            </ng-container>
+                        </div>
+                        <!-- Preview slides — dimmed, non-interactive, data resolved from items 1..N -->
+                        <div *ngFor="let slide of previewSlides; trackBy: trackByNodeId"
+                             class="swiper-slide slider-preview-slide"
+                             [ngClass]="['iox-outer-' + (slide.styleId ?? slide.id)]">
+                            <ng-container
+                                [ioxRender]="slide"
+                                (onClick)="$event"
+                                (onMouseEnter)="$event"
+                                (onMouseLeave)="undefined">
+                            </ng-container>
+                        </div>
+                    </ng-container>
+
                 </div>
 
-                <div *ngIf="!children.length" class="slider-edit-placeholder">
+                <div *ngIf="!source && !children.length" class="slider-edit-placeholder">
                     <i class="ph-thin ph-sliders-horizontal"></i>
                     <span>Click + in toolbar to add a slide</span>
                 </div>
@@ -5816,12 +6055,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
              [style.--swiper-navigation-size.px]="navigationSize || null"
              [style.--swiper-pagination-color]="paginationColor || null">
             <div class="swiper-wrapper">
-                <ng-container *ngFor="let child of children">
-                    <ng-container
-                        [ioxRender]="child"
-                        (onClick)="childClick.emit($event)"
-                        (onMouseEnter)="childMouseEnter.emit($event)"
-                        (onMouseLeave)="childMouseLeave.emit()">
+                <!-- NORMAL: all children (each SliderSlide renders .swiper-slide itself in preview mode) -->
+                <ng-container *ngIf="!source">
+                    <ng-container *ngFor="let child of children">
+                        <ng-container
+                            [ioxRender]="child"
+                            (onClick)="childClick.emit($event)"
+                            (onMouseEnter)="childMouseEnter.emit($event)"
+                            (onMouseLeave)="childMouseLeave.emit()">
+                        </ng-container>
+                    </ng-container>
+                </ng-container>
+                <!-- REPEAT: template slide + preview slides -->
+                <ng-container *ngIf="source">
+                    <ng-container *ngIf="children.length">
+                        <ng-container
+                            [ioxRender]="children[0]"
+                            (onClick)="childClick.emit($event)"
+                            (onMouseEnter)="childMouseEnter.emit($event)"
+                            (onMouseLeave)="childMouseLeave.emit()">
+                        </ng-container>
+                    </ng-container>
+                    <ng-container *ngFor="let slide of previewSlides; trackBy: trackByNodeId">
+                        <ng-container
+                            [ioxRender]="slide"
+                            (onClick)="childClick.emit($event)"
+                            (onMouseEnter)="childMouseEnter.emit($event)"
+                            (onMouseLeave)="childMouseLeave.emit()">
+                        </ng-container>
                     </ng-container>
                 </ng-container>
             </div>
@@ -5830,12 +6091,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             <div *ngIf="enablePagination" class="swiper-pagination"></div>
             <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
-    `, standalone: false, styles: [":host{display:block}.swiper-wrapper{height:auto}.slider-edit-shell{position:relative;display:block}.swiper-edit{width:100%}.swiper-edit .swiper-slide{position:relative}.slider-edit-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:#00000038;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:background .15s}.slider-edit-nav:hover{background:#00000073}.slider-edit-nav--prev{left:8px}.slider-edit-nav--next{right:8px}.slider-edit-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.slider-edit-placeholder i{font-size:22px}\n"] }]
+    `, standalone: false, styles: [":host{display:block}.swiper-wrapper{height:auto}.slider-edit-shell{position:relative;display:block}.swiper-edit{width:100%}.swiper-edit .swiper-slide{position:relative}.slider-edit-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:#00000038;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:background .15s}.slider-edit-nav:hover{background:#00000073}.slider-edit-nav--prev{left:8px}.slider-edit-nav--next{right:8px}.slider-edit-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.slider-edit-placeholder i{font-size:22px}.slider-repeat-badge{position:absolute;top:0;left:0;z-index:10;display:flex;align-items:center;gap:.4rem;padding:4px 8px;font-size:11px;color:#cb9090;background:#cb909014;border:1px solid rgba(203,144,144,.5);border-radius:0 0 4px;opacity:0;transition:opacity .15s;-webkit-user-select:none;user-select:none;pointer-events:none}.slider-edit-shell:hover .slider-repeat-badge{opacity:1}.slider-repeat-badge-count{font-weight:600}.slider-badge-spin{animation:slider-badge-spin 1s linear infinite}@keyframes slider-badge-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.slider-preview-slide{opacity:.55;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [IS_PREVIEW]
+                }] }, { type: OverlayService, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IOX_CONTENT_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IOX_SHOP_SERVICE]
+                }] }, { type: DataSourceRegistryService, decorators: [{
+                    type: Optional
+                }] }, { type: PanelEventService, decorators: [{
+                    type: Optional
+                }] }, { type: i5.ActivatedRoute, decorators: [{
+                    type: Optional
                 }] }], propDecorators: { children: [{
                 type: Input
             }], style: [{
@@ -5910,6 +6189,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Input
             }], breakpoints: [{
                 type: Input
+            }], source: [{
+                type: Input
+            }], limit: [{
+                type: Input
             }], childClick: [{
                 type: Output
             }], childMouseEnter: [{
@@ -6988,6 +7271,16 @@ class SliderContainerConfig extends ComponentConfig {
             { value: 'swiperAutoplayPause', label: 'Pause Autoplay' },
         ];
         this.traits = [
+            // ── Data binding ──────────────────────────────────────────────────
+            new TraitConfig('__dataLabel', 'Data', TraitInputType.SectionLabel),
+            {
+                name: 'source',
+                label: 'Source',
+                type: TraitInputType.Select,
+                options: [], // populated at runtime from DataSourceRegistryService aliases
+                default: '',
+            },
+            new TraitConfig('limit', 'Limit', TraitInputType.Number, undefined, 10),
             // ── Parameters ────────────────────────────────────────────────────
             new TraitConfig('__paramsLabel', 'Parameters', TraitInputType.SectionLabel),
             new TraitConfig('direction', 'Slide direction', TraitInputType.Select, [{ label: 'Horizontal', value: 'horizontal' }, { label: 'Vertical', value: 'vertical' }], 'horizontal'),