@vectoriox/iox-builder 1.6.4 → 1.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2819,7 +2819,11 @@ class RenderDirective {
|
|
|
2819
2819
|
if (nativeEl) {
|
|
2820
2820
|
nativeEl.style.display = 'block';
|
|
2821
2821
|
}
|
|
2822
|
-
|
|
2822
|
+
// Preview clones (repeater/slider-generated rows) are display-only — only the
|
|
2823
|
+
// template node is selectable/editable. Skip overlay registration + interaction
|
|
2824
|
+
// wiring for them so they can't be hovered, selected, or edited on the canvas.
|
|
2825
|
+
const isPreviewClone = !!node.__previewClone;
|
|
2826
|
+
if (nativeEl && !isPreviewClone) {
|
|
2823
2827
|
// Register node → element mapping for parent lookups
|
|
2824
2828
|
this.overlayService.registerNode(node, nativeEl, componentRef);
|
|
2825
2829
|
// Notify BindingsComponent so it re-applies bindings on the new
|
|
@@ -2865,7 +2869,10 @@ class RenderDirective {
|
|
|
2865
2869
|
});
|
|
2866
2870
|
}
|
|
2867
2871
|
// Wire up interactions (animations) after the element is in the DOM.
|
|
2868
|
-
|
|
2872
|
+
// Preview clones are static rows — no per-clone interaction wiring.
|
|
2873
|
+
if (!isPreviewClone) {
|
|
2874
|
+
this.interactionEngine.attach(node);
|
|
2875
|
+
}
|
|
2869
2876
|
}
|
|
2870
2877
|
/** Try setInput(); fall back to direct assignment for non-@Input properties. */
|
|
2871
2878
|
safeSetInput(ref, name, value) {
|
|
@@ -5076,6 +5083,10 @@ function cloneNodesForItem(nodes, item) {
|
|
|
5076
5083
|
clone.id = Math.random().toString(36).substr(2, 9);
|
|
5077
5084
|
// Point this clone and all its descendants at the original CSS rule.
|
|
5078
5085
|
clone.styleId = cssId;
|
|
5086
|
+
// Mark as a preview clone: display-only, not selectable/editable on the canvas.
|
|
5087
|
+
// (Distinct from styleId, which duplication/paste also uses.) The render directive
|
|
5088
|
+
// skips overlay registration for nodes carrying this flag.
|
|
5089
|
+
clone.__previewClone = true;
|
|
5079
5090
|
if (clone.bindings?.length && item) {
|
|
5080
5091
|
for (const binding of clone.bindings) {
|
|
5081
5092
|
const value = resolvePath(item, binding.path);
|
|
@@ -6009,35 +6020,43 @@ class SliderContainerComponent {
|
|
|
6009
6020
|
[style.--swiper-navigation-size.px]="navigationSize || null"
|
|
6010
6021
|
[style.--swiper-pagination-color]="paginationColor || null">
|
|
6011
6022
|
<div class="swiper-wrapper">
|
|
6012
|
-
<!--
|
|
6023
|
+
<!-- Swiper requires .swiper-slide as a DIRECT child of .swiper-wrapper.
|
|
6024
|
+
Wrap each rendered slide in one (same structure as edit mode) so the
|
|
6025
|
+
app-slider-slide host sits INSIDE the slide, not between it and the wrapper. -->
|
|
6013
6026
|
<ng-container *ngIf="!source">
|
|
6014
|
-
<
|
|
6027
|
+
<div *ngFor="let child of children"
|
|
6028
|
+
class="swiper-slide"
|
|
6029
|
+
[ngClass]="['iox-outer-' + (child.styleId ?? child.id)]">
|
|
6015
6030
|
<ng-container
|
|
6016
6031
|
[ioxRender]="child"
|
|
6017
6032
|
(onClick)="childClick.emit($event)"
|
|
6018
6033
|
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
6019
6034
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
6020
6035
|
</ng-container>
|
|
6021
|
-
</
|
|
6036
|
+
</div>
|
|
6022
6037
|
</ng-container>
|
|
6023
6038
|
<!-- REPEAT: template slide + preview slides -->
|
|
6024
6039
|
<ng-container *ngIf="source">
|
|
6025
|
-
<
|
|
6040
|
+
<div *ngIf="children.length"
|
|
6041
|
+
class="swiper-slide"
|
|
6042
|
+
[ngClass]="['iox-outer-' + (children[0].styleId ?? children[0].id)]">
|
|
6026
6043
|
<ng-container
|
|
6027
6044
|
[ioxRender]="children[0]"
|
|
6028
6045
|
(onClick)="childClick.emit($event)"
|
|
6029
6046
|
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
6030
6047
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
6031
6048
|
</ng-container>
|
|
6032
|
-
</
|
|
6033
|
-
<
|
|
6049
|
+
</div>
|
|
6050
|
+
<div *ngFor="let slide of previewSlides; trackBy: trackByNodeId"
|
|
6051
|
+
class="swiper-slide"
|
|
6052
|
+
[ngClass]="['iox-outer-' + (slide.styleId ?? slide.id)]">
|
|
6034
6053
|
<ng-container
|
|
6035
6054
|
[ioxRender]="slide"
|
|
6036
6055
|
(onClick)="childClick.emit($event)"
|
|
6037
6056
|
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
6038
6057
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
6039
6058
|
</ng-container>
|
|
6040
|
-
</
|
|
6059
|
+
</div>
|
|
6041
6060
|
</ng-container>
|
|
6042
6061
|
</div>
|
|
6043
6062
|
<div *ngIf="enableNavigation" class="swiper-button-prev"></div>
|
|
@@ -6151,35 +6170,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
6151
6170
|
[style.--swiper-navigation-size.px]="navigationSize || null"
|
|
6152
6171
|
[style.--swiper-pagination-color]="paginationColor || null">
|
|
6153
6172
|
<div class="swiper-wrapper">
|
|
6154
|
-
<!--
|
|
6173
|
+
<!-- Swiper requires .swiper-slide as a DIRECT child of .swiper-wrapper.
|
|
6174
|
+
Wrap each rendered slide in one (same structure as edit mode) so the
|
|
6175
|
+
app-slider-slide host sits INSIDE the slide, not between it and the wrapper. -->
|
|
6155
6176
|
<ng-container *ngIf="!source">
|
|
6156
|
-
<
|
|
6177
|
+
<div *ngFor="let child of children"
|
|
6178
|
+
class="swiper-slide"
|
|
6179
|
+
[ngClass]="['iox-outer-' + (child.styleId ?? child.id)]">
|
|
6157
6180
|
<ng-container
|
|
6158
6181
|
[ioxRender]="child"
|
|
6159
6182
|
(onClick)="childClick.emit($event)"
|
|
6160
6183
|
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
6161
6184
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
6162
6185
|
</ng-container>
|
|
6163
|
-
</
|
|
6186
|
+
</div>
|
|
6164
6187
|
</ng-container>
|
|
6165
6188
|
<!-- REPEAT: template slide + preview slides -->
|
|
6166
6189
|
<ng-container *ngIf="source">
|
|
6167
|
-
<
|
|
6190
|
+
<div *ngIf="children.length"
|
|
6191
|
+
class="swiper-slide"
|
|
6192
|
+
[ngClass]="['iox-outer-' + (children[0].styleId ?? children[0].id)]">
|
|
6168
6193
|
<ng-container
|
|
6169
6194
|
[ioxRender]="children[0]"
|
|
6170
6195
|
(onClick)="childClick.emit($event)"
|
|
6171
6196
|
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
6172
6197
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
6173
6198
|
</ng-container>
|
|
6174
|
-
</
|
|
6175
|
-
<
|
|
6199
|
+
</div>
|
|
6200
|
+
<div *ngFor="let slide of previewSlides; trackBy: trackByNodeId"
|
|
6201
|
+
class="swiper-slide"
|
|
6202
|
+
[ngClass]="['iox-outer-' + (slide.styleId ?? slide.id)]">
|
|
6176
6203
|
<ng-container
|
|
6177
6204
|
[ioxRender]="slide"
|
|
6178
6205
|
(onClick)="childClick.emit($event)"
|
|
6179
6206
|
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
6180
6207
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
6181
6208
|
</ng-container>
|
|
6182
|
-
</
|
|
6209
|
+
</div>
|
|
6183
6210
|
</ng-container>
|
|
6184
6211
|
</div>
|
|
6185
6212
|
<div *ngIf="enableNavigation" class="swiper-button-prev"></div>
|
|
@@ -6338,9 +6365,11 @@ class SliderSlideComponent {
|
|
|
6338
6365
|
}
|
|
6339
6366
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderSlideComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }, { token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6340
6367
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SliderSlideComponent, isStandalone: false, selector: "app-slider-slide", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
|
|
6341
|
-
<!-- PREVIEW:
|
|
6368
|
+
<!-- PREVIEW: slide content. The .swiper-slide wrapper is provided by SliderContainer
|
|
6369
|
+
(Swiper needs it as a direct child of .swiper-wrapper), so this is just the styled
|
|
6370
|
+
inner block — same role as .slide-edit-block in edit mode. -->
|
|
6342
6371
|
<div *ngIf="isPreview"
|
|
6343
|
-
class="
|
|
6372
|
+
class="slide-edit-block"
|
|
6344
6373
|
[ngClass]="['iox-node-' + nodeId]"
|
|
6345
6374
|
[ngStyle]="style"
|
|
6346
6375
|
ioxDropzone
|
|
@@ -6398,14 +6427,16 @@ class SliderSlideComponent {
|
|
|
6398
6427
|
</ng-container>
|
|
6399
6428
|
</div>
|
|
6400
6429
|
</div>
|
|
6401
|
-
`, isInline: true, styles: [".
|
|
6430
|
+
`, isInline: true, styles: [".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"] }] }); }
|
|
6402
6431
|
}
|
|
6403
6432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderSlideComponent, decorators: [{
|
|
6404
6433
|
type: Component,
|
|
6405
6434
|
args: [{ selector: 'app-slider-slide', template: `
|
|
6406
|
-
<!-- PREVIEW:
|
|
6435
|
+
<!-- PREVIEW: slide content. The .swiper-slide wrapper is provided by SliderContainer
|
|
6436
|
+
(Swiper needs it as a direct child of .swiper-wrapper), so this is just the styled
|
|
6437
|
+
inner block — same role as .slide-edit-block in edit mode. -->
|
|
6407
6438
|
<div *ngIf="isPreview"
|
|
6408
|
-
class="
|
|
6439
|
+
class="slide-edit-block"
|
|
6409
6440
|
[ngClass]="['iox-node-' + nodeId]"
|
|
6410
6441
|
[ngStyle]="style"
|
|
6411
6442
|
ioxDropzone
|
|
@@ -6463,7 +6494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
6463
6494
|
</ng-container>
|
|
6464
6495
|
</div>
|
|
6465
6496
|
</div>
|
|
6466
|
-
`, standalone: false, styles: [".
|
|
6497
|
+
`, standalone: false, styles: [".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"] }]
|
|
6467
6498
|
}], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
6468
6499
|
type: Optional
|
|
6469
6500
|
}, {
|