@vectoriox/iox-builder 1.2.6 → 1.2.8

package/fesm2022/vectoriox-iox-builder.mjs

@@ -290,6 +290,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             type: Injectable
         }] });
 
+function deepCloneNode(node) {
+    const clone = JSON.parse(JSON.stringify(node));
+    regenerateIds(clone);
+    return clone;
+}
+function regenerateIds(node) {
+    node.id = Math.random().toString(36).substr(2, 9);
+    node.styleId = undefined;
+    (node.children || []).forEach(regenerateIds);
+}
 class DragEngineService {
     constructor(registry) {
         this.registry = registry;
@@ -357,8 +367,15 @@ class DragEngineService {
                     sourceData.splice(srcIdx, 1);
                     this.getCdr(payload.sourceId)?.detectChanges();
                 }
+                children.splice(insertIndex, 0, item);
+            }
+            else {
+                // Source not in the drop-zone registry → came from an external panel
+                // (e.g. the built-in blocks panel stores one pre-built node object and
+                // reuses it across drags). Deep-clone with fresh IDs so each drop
+                // produces a fully independent node, preventing shared CSS rules.
+                children.splice(insertIndex, 0, deepCloneNode(item));
             }
-            children.splice(insertIndex, 0, item);
             cdr.detectChanges();
             afterDrop?.();
             return;
@@ -3384,7 +3401,7 @@ class BuilderRepeaterComponent {
             const changedNode = event.data?.node;
             if (!changedNode || !this.items.length)
                 return;
-            if (this.children.some(c => c === changedNode || c.id === changedNode.id)) {
+            if (this.isInTemplate(changedNode)) {
                 this.refreshPreviews();
             }
         });
@@ -3419,6 +3436,11 @@ class BuilderRepeaterComponent {
             }
         });
     }
+    isInTemplate(target) {
+        const search = (nodes) => nodes.some(c => c === target || c.id === target.id ||
+            (c.children?.length ? search(c.children) : false));
+        return search(this.children);
+    }
     refreshPreviews() {
         if (!this.items.length || !this.children.length) {
             this.previewRows = [];
@@ -3628,7 +3650,7 @@ class BuilderButtonBlockComponent {
                 </ng-container>
             </div>
         </button>
-    `, isInline: true, styles: [".button-block-root{font:inherit;color:inherit;text-decoration:none;box-sizing:border-box}.button-block-placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:#64748b66;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.button-block-child{min-width:0}\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: [".button-block-root{width:100%;font:inherit;color:inherit;text-decoration:none;box-sizing:border-box}.button-block-placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:#64748b66;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.button-block-child{min-width:0}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderButtonBlockComponent, decorators: [{
             type: Component,
@@ -3657,7 +3679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 </ng-container>
             </div>
         </button>
-    `, standalone: false, styles: [".button-block-root{font:inherit;color:inherit;text-decoration:none;box-sizing:border-box}.button-block-placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:#64748b66;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.button-block-child{min-width:0}\n"] }]
+    `, standalone: false, styles: [".button-block-root{width:100%;font:inherit;color:inherit;text-decoration:none;box-sizing:border-box}.button-block-placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:#64748b66;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.button-block-child{min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
                 type: Input
             }], style: [{