@vectoriox/iox-builder 1.4.85 → 1.4.87
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.
|
@@ -5495,10 +5495,13 @@ class SliderContainerComponent {
|
|
|
5495
5495
|
this.isPreview = !!isPreview;
|
|
5496
5496
|
}
|
|
5497
5497
|
ngOnInit() { }
|
|
5498
|
+
ngAfterViewInit() {
|
|
5499
|
+
this._initRafId = requestAnimationFrame(() => this._initSwiper());
|
|
5500
|
+
}
|
|
5498
5501
|
ngOnChanges(changes) {
|
|
5499
|
-
if (!this.
|
|
5502
|
+
if (!this._swiper)
|
|
5500
5503
|
return;
|
|
5501
|
-
const
|
|
5504
|
+
const previewKeys = new Set([
|
|
5502
5505
|
'direction', 'loop', 'slidesPerView', 'slidesPerGroup', 'spaceBetween', 'speed',
|
|
5503
5506
|
'effect', 'grabCursor', 'centeredSlides', 'initialSlide', 'autoHeight',
|
|
5504
5507
|
'slideToClickedSlide', 'freeMode', 'breakpoints',
|
|
@@ -5509,27 +5512,30 @@ class SliderContainerComponent {
|
|
|
5509
5512
|
'autoplayDelay', 'autoplayPauseOnMouseEnter', 'autoplayDisableOnInteraction',
|
|
5510
5513
|
'gridRows',
|
|
5511
5514
|
]);
|
|
5512
|
-
|
|
5515
|
+
// Edit mode also reinits when children change (new slide added)
|
|
5516
|
+
const editKeys = new Set([...previewKeys, 'children']);
|
|
5517
|
+
const relevantKeys = this.isPreview ? previewKeys : editKeys;
|
|
5518
|
+
const hasConfigChange = Object.keys(changes).some(k => relevantKeys.has(k));
|
|
5513
5519
|
if (hasConfigChange) {
|
|
5514
5520
|
this._destroySwiper();
|
|
5515
5521
|
this.cdr.detectChanges();
|
|
5516
5522
|
this._initRafId = requestAnimationFrame(() => this._initSwiper());
|
|
5517
5523
|
}
|
|
5518
5524
|
}
|
|
5519
|
-
ngAfterViewInit() {
|
|
5520
|
-
if (this.isPreview) {
|
|
5521
|
-
this._initRafId = requestAnimationFrame(() => this._initSwiper());
|
|
5522
|
-
}
|
|
5523
|
-
}
|
|
5524
5525
|
ngOnDestroy() {
|
|
5525
5526
|
cancelAnimationFrame(this._initRafId);
|
|
5526
5527
|
this._destroySwiper();
|
|
5527
5528
|
}
|
|
5528
5529
|
onDrop(event) {
|
|
5529
5530
|
this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
|
|
5531
|
+
// Sync Swiper's internal slide list after drag-drop reorder
|
|
5532
|
+
if (this._swiper) {
|
|
5533
|
+
requestAnimationFrame(() => this._swiper?.update());
|
|
5534
|
+
}
|
|
5530
5535
|
}
|
|
5531
5536
|
async _initSwiper() {
|
|
5532
|
-
|
|
5537
|
+
const el = this.isPreview ? this.swiperEl?.nativeElement : this.editSwiperEl?.nativeElement;
|
|
5538
|
+
if (!el)
|
|
5533
5539
|
return;
|
|
5534
5540
|
const [{ default: Swiper }, swiperModules] = await Promise.all([
|
|
5535
5541
|
import('swiper'),
|
|
@@ -5543,92 +5549,119 @@ class SliderContainerComponent {
|
|
|
5543
5549
|
modules.push(Pagination);
|
|
5544
5550
|
if (this.enableScrollbar)
|
|
5545
5551
|
modules.push(Scrollbar);
|
|
5546
|
-
if (this.enableAutoplay)
|
|
5547
|
-
modules.push(Autoplay);
|
|
5548
|
-
if (this.enableKeyboard)
|
|
5549
|
-
modules.push(Keyboard);
|
|
5550
|
-
if (this.enableMousewheel)
|
|
5551
|
-
modules.push(Mousewheel);
|
|
5552
|
-
if (this.enableZoom)
|
|
5553
|
-
modules.push(Zoom);
|
|
5554
|
-
if (this.enableGrid)
|
|
5555
|
-
modules.push(Grid);
|
|
5556
|
-
if (this.enableParallax)
|
|
5557
|
-
modules.push(Parallax);
|
|
5558
|
-
if (this.freeMode)
|
|
5559
|
-
modules.push(FreeMode);
|
|
5560
|
-
const effectMap = {
|
|
5561
|
-
fade: EffectFade, cube: EffectCube, flip: EffectFlip,
|
|
5562
|
-
coverflow: EffectCoverflow, cards: EffectCards, creative: EffectCreative,
|
|
5563
|
-
};
|
|
5564
|
-
if (this.effect !== 'slide' && effectMap[this.effect]) {
|
|
5565
|
-
modules.push(effectMap[this.effect]);
|
|
5566
|
-
}
|
|
5567
5552
|
const config = {
|
|
5568
5553
|
modules,
|
|
5569
5554
|
direction: this.direction,
|
|
5570
5555
|
slidesPerView: this.slidesPerView,
|
|
5571
5556
|
slidesPerGroup: this.slidesPerGroup > 1 ? this.slidesPerGroup : 1,
|
|
5572
5557
|
spaceBetween: this.spaceBetween,
|
|
5573
|
-
speed: this.speed,
|
|
5574
|
-
effect
|
|
5575
|
-
|
|
5558
|
+
speed: this.isPreview ? this.speed : 300,
|
|
5559
|
+
// Always slide effect in edit mode — fade/cube etc. hide all but active slide
|
|
5560
|
+
effect: this.isPreview ? this.effect : 'slide',
|
|
5576
5561
|
centeredSlides: this.centeredSlides,
|
|
5577
5562
|
initialSlide: this.initialSlide,
|
|
5578
5563
|
autoHeight: this.autoHeight,
|
|
5579
|
-
slideToClickedSlide: this.slideToClickedSlide,
|
|
5580
|
-
// loop / rewind mapping
|
|
5581
|
-
loop: this.loop === 'loop',
|
|
5582
|
-
rewind: this.loop === 'rewind',
|
|
5583
5564
|
};
|
|
5584
|
-
if (this.
|
|
5585
|
-
config
|
|
5586
|
-
|
|
5587
|
-
|
|
5588
|
-
config['
|
|
5589
|
-
|
|
5590
|
-
|
|
5591
|
-
|
|
5592
|
-
|
|
5593
|
-
|
|
5594
|
-
|
|
5595
|
-
|
|
5565
|
+
if (this.isPreview) {
|
|
5566
|
+
// Full interactive config for preview
|
|
5567
|
+
config['grabCursor'] = this.grabCursor;
|
|
5568
|
+
config['slideToClickedSlide'] = this.slideToClickedSlide;
|
|
5569
|
+
config['loop'] = this.loop === 'loop';
|
|
5570
|
+
config['rewind'] = this.loop === 'rewind';
|
|
5571
|
+
if (this.freeMode) {
|
|
5572
|
+
modules.push(FreeMode);
|
|
5573
|
+
config['freeMode'] = true;
|
|
5574
|
+
}
|
|
5575
|
+
if (this.enableAutoplay) {
|
|
5576
|
+
modules.push(Autoplay);
|
|
5577
|
+
}
|
|
5578
|
+
if (this.enableKeyboard) {
|
|
5579
|
+
modules.push(Keyboard);
|
|
5580
|
+
}
|
|
5581
|
+
if (this.enableMousewheel) {
|
|
5582
|
+
modules.push(Mousewheel);
|
|
5583
|
+
}
|
|
5584
|
+
if (this.enableZoom) {
|
|
5585
|
+
modules.push(Zoom);
|
|
5586
|
+
}
|
|
5587
|
+
if (this.enableGrid) {
|
|
5588
|
+
modules.push(Grid);
|
|
5589
|
+
}
|
|
5590
|
+
if (this.enableParallax) {
|
|
5591
|
+
modules.push(Parallax);
|
|
5592
|
+
}
|
|
5593
|
+
const effectMap = {
|
|
5594
|
+
fade: EffectFade, cube: EffectCube, flip: EffectFlip,
|
|
5595
|
+
coverflow: EffectCoverflow, cards: EffectCards, creative: EffectCreative,
|
|
5596
5596
|
};
|
|
5597
|
-
|
|
5598
|
-
|
|
5599
|
-
|
|
5600
|
-
|
|
5601
|
-
|
|
5602
|
-
|
|
5603
|
-
|
|
5604
|
-
|
|
5605
|
-
|
|
5597
|
+
if (this.effect !== 'slide' && effectMap[this.effect]) {
|
|
5598
|
+
modules.push(effectMap[this.effect]);
|
|
5599
|
+
}
|
|
5600
|
+
if (this.enableNavigation) {
|
|
5601
|
+
config['navigation'] = { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' };
|
|
5602
|
+
}
|
|
5603
|
+
if (this.enablePagination) {
|
|
5604
|
+
config['pagination'] = {
|
|
5605
|
+
el: '.swiper-pagination',
|
|
5606
|
+
type: this.paginationType,
|
|
5607
|
+
clickable: this.paginationClickable,
|
|
5608
|
+
dynamicBullets: this.paginationDynamicBullets,
|
|
5609
|
+
};
|
|
5610
|
+
}
|
|
5611
|
+
if (this.enableScrollbar)
|
|
5612
|
+
config['scrollbar'] = { el: '.swiper-scrollbar', draggable: true };
|
|
5613
|
+
if (this.enableAutoplay) {
|
|
5614
|
+
config['autoplay'] = {
|
|
5615
|
+
delay: this.autoplayDelay,
|
|
5616
|
+
pauseOnMouseEnter: this.autoplayPauseOnMouseEnter,
|
|
5617
|
+
disableOnInteraction: this.autoplayDisableOnInteraction,
|
|
5618
|
+
};
|
|
5619
|
+
}
|
|
5620
|
+
if (this.enableGrid && this.gridRows > 1)
|
|
5621
|
+
config['grid'] = { rows: this.gridRows };
|
|
5622
|
+
if (this.breakpoints) {
|
|
5623
|
+
try {
|
|
5624
|
+
config['breakpoints'] = JSON.parse(this.breakpoints);
|
|
5625
|
+
}
|
|
5626
|
+
catch { /* ignore */ }
|
|
5627
|
+
}
|
|
5628
|
+
config['on'] = {
|
|
5629
|
+
slideChange: (swiper) => this._onSwiperEvent('swiperSlideChange', swiper),
|
|
5630
|
+
reachBeginning: (swiper) => this._onSwiperEvent('swiperReachBeginning', swiper),
|
|
5631
|
+
reachEnd: (swiper) => this._onSwiperEvent('swiperReachEnd', swiper),
|
|
5632
|
+
autoplayStart: (swiper) => this._onSwiperEvent('swiperAutoplayStart', swiper),
|
|
5633
|
+
autoplayStop: (swiper) => this._onSwiperEvent('swiperAutoplayStop', swiper),
|
|
5606
5634
|
};
|
|
5607
5635
|
}
|
|
5608
|
-
|
|
5609
|
-
|
|
5610
|
-
|
|
5611
|
-
|
|
5612
|
-
|
|
5613
|
-
config['
|
|
5636
|
+
else {
|
|
5637
|
+
// Edit mode: disable touch/swipe so builder click handlers work normally
|
|
5638
|
+
config['allowTouchMove'] = false;
|
|
5639
|
+
config['simulateTouch'] = false;
|
|
5640
|
+
if (this.enableNavigation) {
|
|
5641
|
+
config['navigation'] = { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' };
|
|
5614
5642
|
}
|
|
5615
|
-
|
|
5616
|
-
|
|
5617
|
-
|
|
5618
|
-
|
|
5619
|
-
|
|
5620
|
-
|
|
5621
|
-
|
|
5622
|
-
|
|
5623
|
-
|
|
5624
|
-
|
|
5625
|
-
|
|
5643
|
+
if (this.enablePagination) {
|
|
5644
|
+
config['pagination'] = {
|
|
5645
|
+
el: '.swiper-pagination',
|
|
5646
|
+
type: this.paginationType,
|
|
5647
|
+
clickable: this.paginationClickable,
|
|
5648
|
+
dynamicBullets: this.paginationDynamicBullets,
|
|
5649
|
+
};
|
|
5650
|
+
}
|
|
5651
|
+
if (this.enableScrollbar)
|
|
5652
|
+
config['scrollbar'] = { el: '.swiper-scrollbar', draggable: false };
|
|
5653
|
+
}
|
|
5654
|
+
this._swiper = new Swiper(el, config);
|
|
5655
|
+
if (this.isPreview) {
|
|
5656
|
+
this.instanceRegistry.register(this.nodeId, this._swiper);
|
|
5657
|
+
}
|
|
5626
5658
|
}
|
|
5627
5659
|
_destroySwiper() {
|
|
5628
5660
|
if (this._swiper) {
|
|
5629
5661
|
this._swiper.destroy(true, true);
|
|
5630
5662
|
this._swiper = null;
|
|
5631
|
-
|
|
5663
|
+
if (this.isPreview)
|
|
5664
|
+
this.instanceRegistry.unregister(this.nodeId);
|
|
5632
5665
|
}
|
|
5633
5666
|
}
|
|
5634
5667
|
_onSwiperEvent(eventName, swiper) {
|
|
@@ -5645,22 +5678,20 @@ class SliderContainerComponent {
|
|
|
5645
5678
|
}
|
|
5646
5679
|
}
|
|
5647
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 }); }
|
|
5648
|
-
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 }], usesOnChanges: true, ngImport: i0, template: `
|
|
5649
|
-
<!-- EDIT MODE:
|
|
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: real Swiper with touch disabled — shows actual layout for config feedback -->
|
|
5650
5683
|
<div *ngIf="!isPreview"
|
|
5651
|
-
|
|
5684
|
+
#editSwiperEl
|
|
5685
|
+
class="swiper swiper-edit"
|
|
5652
5686
|
[ngClass]="['iox-node-' + nodeId]"
|
|
5653
5687
|
[ngStyle]="style"
|
|
5654
5688
|
ioxDropzone
|
|
5655
5689
|
[ioxDropzoneId]="dropListId"
|
|
5656
5690
|
[ioxDropzoneData]="children"
|
|
5657
5691
|
(ioxDrop)="onDrop($event)">
|
|
5658
|
-
|
|
5659
|
-
<div class="slider-edit-track"
|
|
5660
|
-
[class.slider-edit-track--vertical]="direction === 'vertical'"
|
|
5661
|
-
[style.gap.px]="spaceBetween || 8">
|
|
5692
|
+
<div class="swiper-wrapper">
|
|
5662
5693
|
<div *ngFor="let child of children"
|
|
5663
|
-
class="
|
|
5694
|
+
class="swiper-slide"
|
|
5664
5695
|
[ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
|
|
5665
5696
|
ioxDraggable
|
|
5666
5697
|
[ioxDragData]="child"
|
|
@@ -5672,28 +5703,20 @@ class SliderContainerComponent {
|
|
|
5672
5703
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
5673
5704
|
</ng-container>
|
|
5674
5705
|
</div>
|
|
5675
|
-
|
|
5676
|
-
<div *ngIf="!children.length" class="slider-edit-placeholder">
|
|
5677
|
-
<i class="ph-thin ph-sliders-horizontal"></i>
|
|
5678
|
-
<span>Click + in toolbar to add a slide</span>
|
|
5679
|
-
</div>
|
|
5680
5706
|
</div>
|
|
5681
5707
|
|
|
5682
|
-
|
|
5683
|
-
|
|
5684
|
-
<
|
|
5685
|
-
<button class="slider-edit-nav-btn" disabled><i class="ph-thin ph-caret-right"></i></button>
|
|
5708
|
+
<div *ngIf="!children.length" class="slider-edit-placeholder">
|
|
5709
|
+
<i class="ph-thin ph-sliders-horizontal"></i>
|
|
5710
|
+
<span>Click + in toolbar to add a slide</span>
|
|
5686
5711
|
</div>
|
|
5687
5712
|
|
|
5688
|
-
|
|
5689
|
-
<div *ngIf="
|
|
5690
|
-
|
|
5691
|
-
|
|
5692
|
-
<span class="slider-edit-dot"></span>
|
|
5693
|
-
</div>
|
|
5713
|
+
<div *ngIf="enableNavigation" class="swiper-button-prev"></div>
|
|
5714
|
+
<div *ngIf="enableNavigation" class="swiper-button-next"></div>
|
|
5715
|
+
<div *ngIf="enablePagination" class="swiper-pagination"></div>
|
|
5716
|
+
<div *ngIf="enableScrollbar" class="swiper-scrollbar"></div>
|
|
5694
5717
|
</div>
|
|
5695
5718
|
|
|
5696
|
-
<!-- PREVIEW MODE: real Swiper
|
|
5719
|
+
<!-- PREVIEW MODE: real Swiper with all interactions enabled -->
|
|
5697
5720
|
<div *ngIf="isPreview"
|
|
5698
5721
|
#swiperEl
|
|
5699
5722
|
class="swiper"
|
|
@@ -5717,26 +5740,24 @@ class SliderContainerComponent {
|
|
|
5717
5740
|
<div *ngIf="enablePagination" class="swiper-pagination"></div>
|
|
5718
5741
|
<div *ngIf="enableScrollbar" class="swiper-scrollbar"></div>
|
|
5719
5742
|
</div>
|
|
5720
|
-
`, isInline: true, styles: ["
|
|
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"] }] }); }
|
|
5721
5744
|
}
|
|
5722
5745
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderContainerComponent, decorators: [{
|
|
5723
5746
|
type: Component,
|
|
5724
5747
|
args: [{ selector: 'app-slider-container', template: `
|
|
5725
|
-
<!-- EDIT MODE:
|
|
5748
|
+
<!-- EDIT MODE: real Swiper with touch disabled — shows actual layout for config feedback -->
|
|
5726
5749
|
<div *ngIf="!isPreview"
|
|
5727
|
-
|
|
5750
|
+
#editSwiperEl
|
|
5751
|
+
class="swiper swiper-edit"
|
|
5728
5752
|
[ngClass]="['iox-node-' + nodeId]"
|
|
5729
5753
|
[ngStyle]="style"
|
|
5730
5754
|
ioxDropzone
|
|
5731
5755
|
[ioxDropzoneId]="dropListId"
|
|
5732
5756
|
[ioxDropzoneData]="children"
|
|
5733
5757
|
(ioxDrop)="onDrop($event)">
|
|
5734
|
-
|
|
5735
|
-
<div class="slider-edit-track"
|
|
5736
|
-
[class.slider-edit-track--vertical]="direction === 'vertical'"
|
|
5737
|
-
[style.gap.px]="spaceBetween || 8">
|
|
5758
|
+
<div class="swiper-wrapper">
|
|
5738
5759
|
<div *ngFor="let child of children"
|
|
5739
|
-
class="
|
|
5760
|
+
class="swiper-slide"
|
|
5740
5761
|
[ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
|
|
5741
5762
|
ioxDraggable
|
|
5742
5763
|
[ioxDragData]="child"
|
|
@@ -5748,28 +5769,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5748
5769
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
5749
5770
|
</ng-container>
|
|
5750
5771
|
</div>
|
|
5751
|
-
|
|
5752
|
-
<div *ngIf="!children.length" class="slider-edit-placeholder">
|
|
5753
|
-
<i class="ph-thin ph-sliders-horizontal"></i>
|
|
5754
|
-
<span>Click + in toolbar to add a slide</span>
|
|
5755
|
-
</div>
|
|
5756
5772
|
</div>
|
|
5757
5773
|
|
|
5758
|
-
|
|
5759
|
-
|
|
5760
|
-
<
|
|
5761
|
-
<button class="slider-edit-nav-btn" disabled><i class="ph-thin ph-caret-right"></i></button>
|
|
5774
|
+
<div *ngIf="!children.length" class="slider-edit-placeholder">
|
|
5775
|
+
<i class="ph-thin ph-sliders-horizontal"></i>
|
|
5776
|
+
<span>Click + in toolbar to add a slide</span>
|
|
5762
5777
|
</div>
|
|
5763
5778
|
|
|
5764
|
-
|
|
5765
|
-
<div *ngIf="
|
|
5766
|
-
|
|
5767
|
-
|
|
5768
|
-
<span class="slider-edit-dot"></span>
|
|
5769
|
-
</div>
|
|
5779
|
+
<div *ngIf="enableNavigation" class="swiper-button-prev"></div>
|
|
5780
|
+
<div *ngIf="enableNavigation" class="swiper-button-next"></div>
|
|
5781
|
+
<div *ngIf="enablePagination" class="swiper-pagination"></div>
|
|
5782
|
+
<div *ngIf="enableScrollbar" class="swiper-scrollbar"></div>
|
|
5770
5783
|
</div>
|
|
5771
5784
|
|
|
5772
|
-
<!-- PREVIEW MODE: real Swiper
|
|
5785
|
+
<!-- PREVIEW MODE: real Swiper with all interactions enabled -->
|
|
5773
5786
|
<div *ngIf="isPreview"
|
|
5774
5787
|
#swiperEl
|
|
5775
5788
|
class="swiper"
|
|
@@ -5793,7 +5806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5793
5806
|
<div *ngIf="enablePagination" class="swiper-pagination"></div>
|
|
5794
5807
|
<div *ngIf="enableScrollbar" class="swiper-scrollbar"></div>
|
|
5795
5808
|
</div>
|
|
5796
|
-
`, standalone: false, styles: ["
|
|
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"] }]
|
|
5797
5810
|
}], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
5798
5811
|
type: Optional
|
|
5799
5812
|
}, {
|
|
@@ -5882,6 +5895,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5882
5895
|
}], swiperEl: [{
|
|
5883
5896
|
type: ViewChild,
|
|
5884
5897
|
args: ['swiperEl', { static: false }]
|
|
5898
|
+
}], editSwiperEl: [{
|
|
5899
|
+
type: ViewChild,
|
|
5900
|
+
args: ['editSwiperEl', { static: false }]
|
|
5885
5901
|
}] } });
|
|
5886
5902
|
|
|
5887
5903
|
class SliderSlideComponent {
|