@vectoriox/iox-builder 1.6.3 → 1.6.4

package/fesm2022/vectoriox-iox-builder.mjs

@@ -5792,14 +5792,6 @@ class SliderContainerComponent {
             centeredSlides: this.centeredSlides,
             initialSlide: this.initialSlide,
             autoHeight: this.autoHeight,
-            // Repeater/data-bound slides are injected into the DOM asynchronously, AFTER
-            // Swiper first initializes over the single template slide. Without observers,
-            // Swiper never registers those clones — they collapse into the flex wrapper and
-            // shrink to fit (flat, non-sliding row). These make Swiper watch for added/removed
-            // slides and auto-update its layout.
-            observer: true,
-            observeParents: true,
-            observeSlideChildren: true,
         };
         if (this.isPreview) {
             // Full interactive config for preview
@@ -6314,18 +6306,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }] } });
 
 class SliderSlideComponent {
-    set style(v) { this._style = v; }
+    set style(v) {
+        if (v === this._style)
+            return;
+        this._style = v;
+        // Strip width constraints; rebuild cached object so ngStyle only updates DOM
+        // when the input actually changed — prevents spurious MutationObserver triggers.
+        const { width, minWidth, maxWidth, ...rest } = v || {};
+        this._slideEditStyle = rest;
+    }
     get style() { return this._style; }
+    get slideEditStyle() { return this._slideEditStyle; }
     constructor(dragEngine, cdr, isPreview) {
         this.dragEngine = dragEngine;
         this.cdr = cdr;
         this.isPreview = isPreview;
         this.children = [];
-        // Slide visual styles are applied via the shared `iox-node-<cssId>` CSS class
-        // (StyleRegistryService), not inline — so repeated preview clones inherit master
-        // style edits. Kept as an @Input so render.directive / style panel can still set it
-        // (read internally for CDK orientation) without an NG0303 warning.
         this._style = {};
+        this._slideEditStyle = {};
         this.nodeId = '';
         this.dropListId = '';
         this.childClick = new EventEmitter();
@@ -6344,6 +6342,7 @@ class SliderSlideComponent {
         <div *ngIf="isPreview"
              class="swiper-slide"
              [ngClass]="['iox-node-' + nodeId]"
+             [ngStyle]="style"
              ioxDropzone
              [ioxDropzoneId]="dropListId"
              [ioxDropzoneData]="children"
@@ -6368,13 +6367,14 @@ class SliderSlideComponent {
             </div>
         </div>
 
-        <!-- EDIT: plain block. Visual styles come from the shared iox-node-<cssId> CSS
-             class (StyleRegistryService), NOT inline — so repeated preview clones inherit
-             master-slide style edits through the shared rule. -->
+        <!-- EDIT: plain block so it sits in the horizontal strip.
+             Width/min-width/max-width are stripped from ngStyle here — they belong on the
+             iox-outer-* wrapper (already applied by StyleRegistryService), not on this inner
+             div. Applying them here too would make the content 33% of 33%. -->
         <div *ngIf="!isPreview"
              class="slide-edit-block"
-             [class.slide-empty]="!children.length"
              [ngClass]="['iox-node-' + nodeId]"
+             [ngStyle]="slideEditStyle"
              ioxDropzone
              [ioxDropzoneId]="dropListId"
              [ioxDropzoneData]="children"
@@ -6398,7 +6398,7 @@ class SliderSlideComponent {
                 </ng-container>
             </div>
         </div>
-    `, isInline: true, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden}.slide-edit-block{width:100%}.slide-edit-block.slide-empty{min-height:120px;background-color:var(--p-surface-300)}.slide-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;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-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: 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: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--p-surface-300)}.slide-edit-block{width:100%}.slide-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;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderSlideComponent, decorators: [{
             type: Component,
@@ -6407,6 +6407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
         <div *ngIf="isPreview"
              class="swiper-slide"
              [ngClass]="['iox-node-' + nodeId]"
+             [ngStyle]="style"
              ioxDropzone
              [ioxDropzoneId]="dropListId"
              [ioxDropzoneData]="children"
@@ -6431,13 +6432,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             </div>
         </div>
 
-        <!-- EDIT: plain block. Visual styles come from the shared iox-node-<cssId> CSS
-             class (StyleRegistryService), NOT inline — so repeated preview clones inherit
-             master-slide style edits through the shared rule. -->
+        <!-- EDIT: plain block so it sits in the horizontal strip.
+             Width/min-width/max-width are stripped from ngStyle here — they belong on the
+             iox-outer-* wrapper (already applied by StyleRegistryService), not on this inner
+             div. Applying them here too would make the content 33% of 33%. -->
         <div *ngIf="!isPreview"
              class="slide-edit-block"
-             [class.slide-empty]="!children.length"
              [ngClass]="['iox-node-' + nodeId]"
+             [ngStyle]="slideEditStyle"
              ioxDropzone
              [ioxDropzoneId]="dropListId"
              [ioxDropzoneData]="children"
@@ -6461,7 +6463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 </ng-container>
             </div>
         </div>
-    `, standalone: false, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden}.slide-edit-block{width:100%}.slide-edit-block.slide-empty{min-height:120px;background-color:var(--p-surface-300)}.slide-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;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-placeholder i{font-size:22px}\n"] }]
+    `, standalone: false, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--p-surface-300)}.slide-edit-block{width:100%}.slide-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;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-placeholder i{font-size:22px}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {