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