@vectoriox/iox-builder 1.4.87 → 1.4.89
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.
|
@@ -5435,6 +5435,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5435
5435
|
}] } });
|
|
5436
5436
|
|
|
5437
5437
|
class SliderContainerComponent {
|
|
5438
|
+
get editShellStyle() {
|
|
5439
|
+
// Inline styles win over CSS rules, so force position:relative here to guarantee
|
|
5440
|
+
// the nav buttons (position:absolute) are anchored to THIS element, not a canvas ancestor.
|
|
5441
|
+
return { ...this.style, position: 'relative' };
|
|
5442
|
+
}
|
|
5438
5443
|
constructor(dragEngine, cdr, isPreview) {
|
|
5439
5444
|
this.dragEngine = dragEngine;
|
|
5440
5445
|
this.cdr = cdr;
|
|
@@ -5679,41 +5684,52 @@ class SliderContainerComponent {
|
|
|
5679
5684
|
}
|
|
5680
5685
|
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 }); }
|
|
5681
5686
|
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: `
|
|
5682
|
-
<!-- EDIT MODE:
|
|
5687
|
+
<!-- EDIT MODE: shell wraps swiper + nav buttons so arrows position relative to slide area -->
|
|
5683
5688
|
<div *ngIf="!isPreview"
|
|
5684
|
-
|
|
5685
|
-
class="swiper swiper-edit"
|
|
5689
|
+
class="slider-edit-shell"
|
|
5686
5690
|
[ngClass]="['iox-node-' + nodeId]"
|
|
5687
|
-
[ngStyle]="
|
|
5691
|
+
[ngStyle]="editShellStyle"
|
|
5688
5692
|
ioxDropzone
|
|
5689
5693
|
[ioxDropzoneId]="dropListId"
|
|
5690
5694
|
[ioxDropzoneData]="children"
|
|
5691
5695
|
(ioxDrop)="onDrop($event)">
|
|
5692
|
-
|
|
5693
|
-
|
|
5694
|
-
|
|
5695
|
-
|
|
5696
|
-
|
|
5697
|
-
|
|
5698
|
-
|
|
5699
|
-
|
|
5700
|
-
|
|
5701
|
-
|
|
5702
|
-
|
|
5703
|
-
|
|
5704
|
-
|
|
5696
|
+
|
|
5697
|
+
<div #editSwiperEl class="swiper swiper-edit">
|
|
5698
|
+
<div class="swiper-wrapper">
|
|
5699
|
+
<div *ngFor="let child of children"
|
|
5700
|
+
class="swiper-slide"
|
|
5701
|
+
[ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
|
|
5702
|
+
ioxDraggable
|
|
5703
|
+
[ioxDragData]="child"
|
|
5704
|
+
[ioxDragSourceId]="dropListId">
|
|
5705
|
+
<ng-container
|
|
5706
|
+
[ioxRender]="child"
|
|
5707
|
+
(onClick)="childClick.emit($event)"
|
|
5708
|
+
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
5709
|
+
(onMouseLeave)="childMouseLeave.emit()">
|
|
5710
|
+
</ng-container>
|
|
5711
|
+
</div>
|
|
5705
5712
|
</div>
|
|
5706
|
-
</div>
|
|
5707
5713
|
|
|
5708
|
-
|
|
5709
|
-
|
|
5710
|
-
|
|
5714
|
+
<div *ngIf="!children.length" class="slider-edit-placeholder">
|
|
5715
|
+
<i class="ph-thin ph-sliders-horizontal"></i>
|
|
5716
|
+
<span>Click + in toolbar to add a slide</span>
|
|
5717
|
+
</div>
|
|
5718
|
+
|
|
5719
|
+
<div *ngIf="enablePagination" class="swiper-pagination"></div>
|
|
5720
|
+
<div *ngIf="enableScrollbar" class="swiper-scrollbar"></div>
|
|
5711
5721
|
</div>
|
|
5712
5722
|
|
|
5713
|
-
|
|
5714
|
-
|
|
5715
|
-
<
|
|
5716
|
-
|
|
5723
|
+
<!-- Nav buttons live on the shell, not inside .swiper, so overflow:hidden never clips them
|
|
5724
|
+
and top:50%+transform always centers on the real slide height -->
|
|
5725
|
+
<button *ngIf="enableNavigation" class="slider-edit-nav slider-edit-nav--prev"
|
|
5726
|
+
(click)="_swiper?.slidePrev()" type="button">
|
|
5727
|
+
<i class="ph-thin ph-caret-left"></i>
|
|
5728
|
+
</button>
|
|
5729
|
+
<button *ngIf="enableNavigation" class="slider-edit-nav slider-edit-nav--next"
|
|
5730
|
+
(click)="_swiper?.slideNext()" type="button">
|
|
5731
|
+
<i class="ph-thin ph-caret-right"></i>
|
|
5732
|
+
</button>
|
|
5717
5733
|
</div>
|
|
5718
5734
|
|
|
5719
5735
|
<!-- PREVIEW MODE: real Swiper with all interactions enabled -->
|
|
@@ -5740,46 +5756,57 @@ class SliderContainerComponent {
|
|
|
5740
5756
|
<div *ngIf="enablePagination" class="swiper-pagination"></div>
|
|
5741
5757
|
<div *ngIf="enableScrollbar" class="swiper-scrollbar"></div>
|
|
5742
5758
|
</div>
|
|
5743
|
-
`, isInline: true, styles: [":host{display:block}.swiper-wrapper{height:auto}.swiper-edit .swiper-slide{position:relative}.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"] }] }); }
|
|
5759
|
+
`, 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"] }] }); }
|
|
5744
5760
|
}
|
|
5745
5761
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderContainerComponent, decorators: [{
|
|
5746
5762
|
type: Component,
|
|
5747
5763
|
args: [{ selector: 'app-slider-container', template: `
|
|
5748
|
-
<!-- EDIT MODE:
|
|
5764
|
+
<!-- EDIT MODE: shell wraps swiper + nav buttons so arrows position relative to slide area -->
|
|
5749
5765
|
<div *ngIf="!isPreview"
|
|
5750
|
-
|
|
5751
|
-
class="swiper swiper-edit"
|
|
5766
|
+
class="slider-edit-shell"
|
|
5752
5767
|
[ngClass]="['iox-node-' + nodeId]"
|
|
5753
|
-
[ngStyle]="
|
|
5768
|
+
[ngStyle]="editShellStyle"
|
|
5754
5769
|
ioxDropzone
|
|
5755
5770
|
[ioxDropzoneId]="dropListId"
|
|
5756
5771
|
[ioxDropzoneData]="children"
|
|
5757
5772
|
(ioxDrop)="onDrop($event)">
|
|
5758
|
-
|
|
5759
|
-
|
|
5760
|
-
|
|
5761
|
-
|
|
5762
|
-
|
|
5763
|
-
|
|
5764
|
-
|
|
5765
|
-
|
|
5766
|
-
|
|
5767
|
-
|
|
5768
|
-
|
|
5769
|
-
|
|
5770
|
-
|
|
5773
|
+
|
|
5774
|
+
<div #editSwiperEl class="swiper swiper-edit">
|
|
5775
|
+
<div class="swiper-wrapper">
|
|
5776
|
+
<div *ngFor="let child of children"
|
|
5777
|
+
class="swiper-slide"
|
|
5778
|
+
[ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
|
|
5779
|
+
ioxDraggable
|
|
5780
|
+
[ioxDragData]="child"
|
|
5781
|
+
[ioxDragSourceId]="dropListId">
|
|
5782
|
+
<ng-container
|
|
5783
|
+
[ioxRender]="child"
|
|
5784
|
+
(onClick)="childClick.emit($event)"
|
|
5785
|
+
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
5786
|
+
(onMouseLeave)="childMouseLeave.emit()">
|
|
5787
|
+
</ng-container>
|
|
5788
|
+
</div>
|
|
5771
5789
|
</div>
|
|
5772
|
-
</div>
|
|
5773
5790
|
|
|
5774
|
-
|
|
5775
|
-
|
|
5776
|
-
|
|
5791
|
+
<div *ngIf="!children.length" class="slider-edit-placeholder">
|
|
5792
|
+
<i class="ph-thin ph-sliders-horizontal"></i>
|
|
5793
|
+
<span>Click + in toolbar to add a slide</span>
|
|
5794
|
+
</div>
|
|
5795
|
+
|
|
5796
|
+
<div *ngIf="enablePagination" class="swiper-pagination"></div>
|
|
5797
|
+
<div *ngIf="enableScrollbar" class="swiper-scrollbar"></div>
|
|
5777
5798
|
</div>
|
|
5778
5799
|
|
|
5779
|
-
|
|
5780
|
-
|
|
5781
|
-
<
|
|
5782
|
-
|
|
5800
|
+
<!-- Nav buttons live on the shell, not inside .swiper, so overflow:hidden never clips them
|
|
5801
|
+
and top:50%+transform always centers on the real slide height -->
|
|
5802
|
+
<button *ngIf="enableNavigation" class="slider-edit-nav slider-edit-nav--prev"
|
|
5803
|
+
(click)="_swiper?.slidePrev()" type="button">
|
|
5804
|
+
<i class="ph-thin ph-caret-left"></i>
|
|
5805
|
+
</button>
|
|
5806
|
+
<button *ngIf="enableNavigation" class="slider-edit-nav slider-edit-nav--next"
|
|
5807
|
+
(click)="_swiper?.slideNext()" type="button">
|
|
5808
|
+
<i class="ph-thin ph-caret-right"></i>
|
|
5809
|
+
</button>
|
|
5783
5810
|
</div>
|
|
5784
5811
|
|
|
5785
5812
|
<!-- PREVIEW MODE: real Swiper with all interactions enabled -->
|
|
@@ -5806,7 +5833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5806
5833
|
<div *ngIf="enablePagination" class="swiper-pagination"></div>
|
|
5807
5834
|
<div *ngIf="enableScrollbar" class="swiper-scrollbar"></div>
|
|
5808
5835
|
</div>
|
|
5809
|
-
`, standalone: false, styles: [":host{display:block}.swiper-wrapper{height:auto}.swiper-edit .swiper-slide{position:relative}.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"] }]
|
|
5836
|
+
`, 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"] }]
|
|
5810
5837
|
}], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
5811
5838
|
type: Optional
|
|
5812
5839
|
}, {
|