@vectoriox/iox-builder 1.6.3 → 1.6.5
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.
|
@@ -5792,14 +5792,6 @@ class SliderContainerComponent {
|
|
|
5792
5792
|
centeredSlides: this.centeredSlides,
|
|
5793
5793
|
initialSlide: this.initialSlide,
|
|
5794
5794
|
autoHeight: this.autoHeight,
|
|
5795
|
-
// Repeater/data-bound slides are injected into the DOM asynchronously, AFTER
|
|
5796
|
-
// Swiper first initializes over the single template slide. Without observers,
|
|
5797
|
-
// Swiper never registers those clones — they collapse into the flex wrapper and
|
|
5798
|
-
// shrink to fit (flat, non-sliding row). These make Swiper watch for added/removed
|
|
5799
|
-
// slides and auto-update its layout.
|
|
5800
|
-
observer: true,
|
|
5801
|
-
observeParents: true,
|
|
5802
|
-
observeSlideChildren: true,
|
|
5803
5795
|
};
|
|
5804
5796
|
if (this.isPreview) {
|
|
5805
5797
|
// Full interactive config for preview
|
|
@@ -6017,35 +6009,43 @@ class SliderContainerComponent {
|
|
|
6017
6009
|
[style.--swiper-navigation-size.px]="navigationSize || null"
|
|
6018
6010
|
[style.--swiper-pagination-color]="paginationColor || null">
|
|
6019
6011
|
<div class="swiper-wrapper">
|
|
6020
|
-
<!--
|
|
6012
|
+
<!-- Swiper requires .swiper-slide as a DIRECT child of .swiper-wrapper.
|
|
6013
|
+
Wrap each rendered slide in one (same structure as edit mode) so the
|
|
6014
|
+
app-slider-slide host sits INSIDE the slide, not between it and the wrapper. -->
|
|
6021
6015
|
<ng-container *ngIf="!source">
|
|
6022
|
-
<
|
|
6016
|
+
<div *ngFor="let child of children"
|
|
6017
|
+
class="swiper-slide"
|
|
6018
|
+
[ngClass]="['iox-outer-' + (child.styleId ?? child.id)]">
|
|
6023
6019
|
<ng-container
|
|
6024
6020
|
[ioxRender]="child"
|
|
6025
6021
|
(onClick)="childClick.emit($event)"
|
|
6026
6022
|
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
6027
6023
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
6028
6024
|
</ng-container>
|
|
6029
|
-
</
|
|
6025
|
+
</div>
|
|
6030
6026
|
</ng-container>
|
|
6031
6027
|
<!-- REPEAT: template slide + preview slides -->
|
|
6032
6028
|
<ng-container *ngIf="source">
|
|
6033
|
-
<
|
|
6029
|
+
<div *ngIf="children.length"
|
|
6030
|
+
class="swiper-slide"
|
|
6031
|
+
[ngClass]="['iox-outer-' + (children[0].styleId ?? children[0].id)]">
|
|
6034
6032
|
<ng-container
|
|
6035
6033
|
[ioxRender]="children[0]"
|
|
6036
6034
|
(onClick)="childClick.emit($event)"
|
|
6037
6035
|
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
6038
6036
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
6039
6037
|
</ng-container>
|
|
6040
|
-
</
|
|
6041
|
-
<
|
|
6038
|
+
</div>
|
|
6039
|
+
<div *ngFor="let slide of previewSlides; trackBy: trackByNodeId"
|
|
6040
|
+
class="swiper-slide"
|
|
6041
|
+
[ngClass]="['iox-outer-' + (slide.styleId ?? slide.id)]">
|
|
6042
6042
|
<ng-container
|
|
6043
6043
|
[ioxRender]="slide"
|
|
6044
6044
|
(onClick)="childClick.emit($event)"
|
|
6045
6045
|
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
6046
6046
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
6047
6047
|
</ng-container>
|
|
6048
|
-
</
|
|
6048
|
+
</div>
|
|
6049
6049
|
</ng-container>
|
|
6050
6050
|
</div>
|
|
6051
6051
|
<div *ngIf="enableNavigation" class="swiper-button-prev"></div>
|
|
@@ -6159,35 +6159,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
6159
6159
|
[style.--swiper-navigation-size.px]="navigationSize || null"
|
|
6160
6160
|
[style.--swiper-pagination-color]="paginationColor || null">
|
|
6161
6161
|
<div class="swiper-wrapper">
|
|
6162
|
-
<!--
|
|
6162
|
+
<!-- Swiper requires .swiper-slide as a DIRECT child of .swiper-wrapper.
|
|
6163
|
+
Wrap each rendered slide in one (same structure as edit mode) so the
|
|
6164
|
+
app-slider-slide host sits INSIDE the slide, not between it and the wrapper. -->
|
|
6163
6165
|
<ng-container *ngIf="!source">
|
|
6164
|
-
<
|
|
6166
|
+
<div *ngFor="let child of children"
|
|
6167
|
+
class="swiper-slide"
|
|
6168
|
+
[ngClass]="['iox-outer-' + (child.styleId ?? child.id)]">
|
|
6165
6169
|
<ng-container
|
|
6166
6170
|
[ioxRender]="child"
|
|
6167
6171
|
(onClick)="childClick.emit($event)"
|
|
6168
6172
|
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
6169
6173
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
6170
6174
|
</ng-container>
|
|
6171
|
-
</
|
|
6175
|
+
</div>
|
|
6172
6176
|
</ng-container>
|
|
6173
6177
|
<!-- REPEAT: template slide + preview slides -->
|
|
6174
6178
|
<ng-container *ngIf="source">
|
|
6175
|
-
<
|
|
6179
|
+
<div *ngIf="children.length"
|
|
6180
|
+
class="swiper-slide"
|
|
6181
|
+
[ngClass]="['iox-outer-' + (children[0].styleId ?? children[0].id)]">
|
|
6176
6182
|
<ng-container
|
|
6177
6183
|
[ioxRender]="children[0]"
|
|
6178
6184
|
(onClick)="childClick.emit($event)"
|
|
6179
6185
|
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
6180
6186
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
6181
6187
|
</ng-container>
|
|
6182
|
-
</
|
|
6183
|
-
<
|
|
6188
|
+
</div>
|
|
6189
|
+
<div *ngFor="let slide of previewSlides; trackBy: trackByNodeId"
|
|
6190
|
+
class="swiper-slide"
|
|
6191
|
+
[ngClass]="['iox-outer-' + (slide.styleId ?? slide.id)]">
|
|
6184
6192
|
<ng-container
|
|
6185
6193
|
[ioxRender]="slide"
|
|
6186
6194
|
(onClick)="childClick.emit($event)"
|
|
6187
6195
|
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
6188
6196
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
6189
6197
|
</ng-container>
|
|
6190
|
-
</
|
|
6198
|
+
</div>
|
|
6191
6199
|
</ng-container>
|
|
6192
6200
|
</div>
|
|
6193
6201
|
<div *ngIf="enableNavigation" class="swiper-button-prev"></div>
|
|
@@ -6314,18 +6322,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
6314
6322
|
}] } });
|
|
6315
6323
|
|
|
6316
6324
|
class SliderSlideComponent {
|
|
6317
|
-
set style(v) {
|
|
6325
|
+
set style(v) {
|
|
6326
|
+
if (v === this._style)
|
|
6327
|
+
return;
|
|
6328
|
+
this._style = v;
|
|
6329
|
+
// Strip width constraints; rebuild cached object so ngStyle only updates DOM
|
|
6330
|
+
// when the input actually changed — prevents spurious MutationObserver triggers.
|
|
6331
|
+
const { width, minWidth, maxWidth, ...rest } = v || {};
|
|
6332
|
+
this._slideEditStyle = rest;
|
|
6333
|
+
}
|
|
6318
6334
|
get style() { return this._style; }
|
|
6335
|
+
get slideEditStyle() { return this._slideEditStyle; }
|
|
6319
6336
|
constructor(dragEngine, cdr, isPreview) {
|
|
6320
6337
|
this.dragEngine = dragEngine;
|
|
6321
6338
|
this.cdr = cdr;
|
|
6322
6339
|
this.isPreview = isPreview;
|
|
6323
6340
|
this.children = [];
|
|
6324
|
-
// Slide visual styles are applied via the shared `iox-node-<cssId>` CSS class
|
|
6325
|
-
// (StyleRegistryService), not inline — so repeated preview clones inherit master
|
|
6326
|
-
// style edits. Kept as an @Input so render.directive / style panel can still set it
|
|
6327
|
-
// (read internally for CDK orientation) without an NG0303 warning.
|
|
6328
6341
|
this._style = {};
|
|
6342
|
+
this._slideEditStyle = {};
|
|
6329
6343
|
this.nodeId = '';
|
|
6330
6344
|
this.dropListId = '';
|
|
6331
6345
|
this.childClick = new EventEmitter();
|
|
@@ -6340,10 +6354,13 @@ class SliderSlideComponent {
|
|
|
6340
6354
|
}
|
|
6341
6355
|
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 }); }
|
|
6342
6356
|
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: `
|
|
6343
|
-
<!-- PREVIEW:
|
|
6357
|
+
<!-- PREVIEW: slide content. The .swiper-slide wrapper is provided by SliderContainer
|
|
6358
|
+
(Swiper needs it as a direct child of .swiper-wrapper), so this is just the styled
|
|
6359
|
+
inner block — same role as .slide-edit-block in edit mode. -->
|
|
6344
6360
|
<div *ngIf="isPreview"
|
|
6345
|
-
class="
|
|
6361
|
+
class="slide-edit-block"
|
|
6346
6362
|
[ngClass]="['iox-node-' + nodeId]"
|
|
6363
|
+
[ngStyle]="style"
|
|
6347
6364
|
ioxDropzone
|
|
6348
6365
|
[ioxDropzoneId]="dropListId"
|
|
6349
6366
|
[ioxDropzoneData]="children"
|
|
@@ -6368,13 +6385,14 @@ class SliderSlideComponent {
|
|
|
6368
6385
|
</div>
|
|
6369
6386
|
</div>
|
|
6370
6387
|
|
|
6371
|
-
<!-- EDIT: plain block
|
|
6372
|
-
|
|
6373
|
-
|
|
6388
|
+
<!-- EDIT: plain block so it sits in the horizontal strip.
|
|
6389
|
+
Width/min-width/max-width are stripped from ngStyle here — they belong on the
|
|
6390
|
+
iox-outer-* wrapper (already applied by StyleRegistryService), not on this inner
|
|
6391
|
+
div. Applying them here too would make the content 33% of 33%. -->
|
|
6374
6392
|
<div *ngIf="!isPreview"
|
|
6375
6393
|
class="slide-edit-block"
|
|
6376
|
-
[class.slide-empty]="!children.length"
|
|
6377
6394
|
[ngClass]="['iox-node-' + nodeId]"
|
|
6395
|
+
[ngStyle]="slideEditStyle"
|
|
6378
6396
|
ioxDropzone
|
|
6379
6397
|
[ioxDropzoneId]="dropListId"
|
|
6380
6398
|
[ioxDropzoneData]="children"
|
|
@@ -6398,15 +6416,18 @@ class SliderSlideComponent {
|
|
|
6398
6416
|
</ng-container>
|
|
6399
6417
|
</div>
|
|
6400
6418
|
</div>
|
|
6401
|
-
`, isInline: true, styles: [".
|
|
6419
|
+
`, 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
6420
|
}
|
|
6403
6421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderSlideComponent, decorators: [{
|
|
6404
6422
|
type: Component,
|
|
6405
6423
|
args: [{ selector: 'app-slider-slide', template: `
|
|
6406
|
-
<!-- PREVIEW:
|
|
6424
|
+
<!-- PREVIEW: slide content. The .swiper-slide wrapper is provided by SliderContainer
|
|
6425
|
+
(Swiper needs it as a direct child of .swiper-wrapper), so this is just the styled
|
|
6426
|
+
inner block — same role as .slide-edit-block in edit mode. -->
|
|
6407
6427
|
<div *ngIf="isPreview"
|
|
6408
|
-
class="
|
|
6428
|
+
class="slide-edit-block"
|
|
6409
6429
|
[ngClass]="['iox-node-' + nodeId]"
|
|
6430
|
+
[ngStyle]="style"
|
|
6410
6431
|
ioxDropzone
|
|
6411
6432
|
[ioxDropzoneId]="dropListId"
|
|
6412
6433
|
[ioxDropzoneData]="children"
|
|
@@ -6431,13 +6452,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
6431
6452
|
</div>
|
|
6432
6453
|
</div>
|
|
6433
6454
|
|
|
6434
|
-
<!-- EDIT: plain block
|
|
6435
|
-
|
|
6436
|
-
|
|
6455
|
+
<!-- EDIT: plain block so it sits in the horizontal strip.
|
|
6456
|
+
Width/min-width/max-width are stripped from ngStyle here — they belong on the
|
|
6457
|
+
iox-outer-* wrapper (already applied by StyleRegistryService), not on this inner
|
|
6458
|
+
div. Applying them here too would make the content 33% of 33%. -->
|
|
6437
6459
|
<div *ngIf="!isPreview"
|
|
6438
6460
|
class="slide-edit-block"
|
|
6439
|
-
[class.slide-empty]="!children.length"
|
|
6440
6461
|
[ngClass]="['iox-node-' + nodeId]"
|
|
6462
|
+
[ngStyle]="slideEditStyle"
|
|
6441
6463
|
ioxDropzone
|
|
6442
6464
|
[ioxDropzoneId]="dropListId"
|
|
6443
6465
|
[ioxDropzoneData]="children"
|
|
@@ -6461,7 +6483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
6461
6483
|
</ng-container>
|
|
6462
6484
|
</div>
|
|
6463
6485
|
</div>
|
|
6464
|
-
`, standalone: false, styles: [".
|
|
6486
|
+
`, 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"] }]
|
|
6465
6487
|
}], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
6466
6488
|
type: Optional
|
|
6467
6489
|
}, {
|