@vectoriox/iox-builder 1.4.82 → 1.4.84
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.
|
@@ -5443,36 +5443,47 @@ class SliderContainerComponent {
|
|
|
5443
5443
|
this.style = {};
|
|
5444
5444
|
this.nodeId = '';
|
|
5445
5445
|
this.dropListId = '';
|
|
5446
|
-
//
|
|
5446
|
+
// ── Parameters ─────────────────────────────────────────────────────────────
|
|
5447
5447
|
this.direction = 'horizontal';
|
|
5448
|
-
this.loop = false;
|
|
5449
5448
|
this.slidesPerView = 'auto';
|
|
5450
|
-
this.
|
|
5451
|
-
|
|
5452
|
-
this.
|
|
5453
|
-
this.grabCursor = true;
|
|
5449
|
+
this.slidesPerGroup = 1;
|
|
5450
|
+
/** 'off' | 'loop' | 'rewind' */
|
|
5451
|
+
this.loop = 'off';
|
|
5454
5452
|
this.centeredSlides = false;
|
|
5453
|
+
this.spaceBetween = 0;
|
|
5455
5454
|
this.initialSlide = 0;
|
|
5456
|
-
|
|
5455
|
+
this.autoHeight = false;
|
|
5456
|
+
this.grabCursor = true;
|
|
5457
|
+
this.slideToClickedSlide = false;
|
|
5458
|
+
// ── Effects ────────────────────────────────────────────────────────────────
|
|
5459
|
+
this.effect = 'slide';
|
|
5460
|
+
this.speed = 300;
|
|
5461
|
+
// ── Navigation ─────────────────────────────────────────────────────────────
|
|
5457
5462
|
this.enableNavigation = false;
|
|
5463
|
+
this.navigationColor = '';
|
|
5464
|
+
this.navigationSize = 44;
|
|
5465
|
+
// ── Pagination ─────────────────────────────────────────────────────────────
|
|
5458
5466
|
this.enablePagination = false;
|
|
5459
|
-
this.
|
|
5467
|
+
this.paginationColor = '';
|
|
5468
|
+
this.paginationType = 'bullets';
|
|
5469
|
+
this.paginationClickable = true;
|
|
5470
|
+
this.paginationDynamicBullets = false;
|
|
5471
|
+
// ── Autoplay ───────────────────────────────────────────────────────────────
|
|
5460
5472
|
this.enableAutoplay = false;
|
|
5473
|
+
this.autoplayDelay = 3000;
|
|
5474
|
+
this.autoplayPauseOnMouseEnter = true;
|
|
5475
|
+
this.autoplayDisableOnInteraction = false;
|
|
5476
|
+
// ── Modules ────────────────────────────────────────────────────────────────
|
|
5477
|
+
this.enableScrollbar = false;
|
|
5478
|
+
this.freeMode = false;
|
|
5461
5479
|
this.enableKeyboard = false;
|
|
5462
5480
|
this.enableMousewheel = false;
|
|
5463
5481
|
this.enableZoom = false;
|
|
5464
|
-
this.enableGrid = false;
|
|
5465
5482
|
this.enableParallax = false;
|
|
5466
|
-
//
|
|
5467
|
-
this.
|
|
5468
|
-
this.
|
|
5469
|
-
|
|
5470
|
-
// Pagination sub-options
|
|
5471
|
-
this.paginationType = 'bullets';
|
|
5472
|
-
this.paginationClickable = true;
|
|
5473
|
-
// Grid sub-options
|
|
5474
|
-
this.gridRows = 1;
|
|
5475
|
-
// Responsive breakpoints (JSON string)
|
|
5483
|
+
// ── Grid ───────────────────────────────────────────────────────────────────
|
|
5484
|
+
this.enableGrid = false;
|
|
5485
|
+
this.gridRows = 2;
|
|
5486
|
+
// ── Responsive ─────────────────────────────────────────────────────────────
|
|
5476
5487
|
this.breakpoints = '';
|
|
5477
5488
|
this.childClick = new EventEmitter();
|
|
5478
5489
|
this.childMouseEnter = new EventEmitter();
|
|
@@ -5487,14 +5498,16 @@ class SliderContainerComponent {
|
|
|
5487
5498
|
ngOnChanges(changes) {
|
|
5488
5499
|
if (!this.isPreview || !this._swiper)
|
|
5489
5500
|
return;
|
|
5490
|
-
// Re-init Swiper when config inputs change in preview mode
|
|
5491
5501
|
const swiperKeys = new Set([
|
|
5492
|
-
'direction', 'loop', 'slidesPerView', 'spaceBetween', 'speed',
|
|
5493
|
-
'effect', 'grabCursor', 'centeredSlides', 'initialSlide', '
|
|
5494
|
-
'
|
|
5502
|
+
'direction', 'loop', 'slidesPerView', 'slidesPerGroup', 'spaceBetween', 'speed',
|
|
5503
|
+
'effect', 'grabCursor', 'centeredSlides', 'initialSlide', 'autoHeight',
|
|
5504
|
+
'slideToClickedSlide', 'freeMode', 'breakpoints',
|
|
5505
|
+
'enableNavigation', 'navigationColor', 'navigationSize',
|
|
5506
|
+
'enablePagination', 'paginationColor', 'paginationType', 'paginationClickable', 'paginationDynamicBullets',
|
|
5507
|
+
'enableScrollbar', 'enableAutoplay',
|
|
5495
5508
|
'enableKeyboard', 'enableMousewheel', 'enableZoom', 'enableGrid', 'enableParallax',
|
|
5496
5509
|
'autoplayDelay', 'autoplayPauseOnMouseEnter', 'autoplayDisableOnInteraction',
|
|
5497
|
-
'
|
|
5510
|
+
'gridRows',
|
|
5498
5511
|
]);
|
|
5499
5512
|
const hasConfigChange = Object.keys(changes).some(k => swiperKeys.has(k));
|
|
5500
5513
|
if (hasConfigChange) {
|
|
@@ -5522,7 +5535,7 @@ class SliderContainerComponent {
|
|
|
5522
5535
|
import('swiper'),
|
|
5523
5536
|
import('swiper/modules'),
|
|
5524
5537
|
]);
|
|
5525
|
-
const { Navigation, Pagination, Scrollbar, Autoplay, Keyboard, Mousewheel, Zoom, Grid, Parallax, EffectFade, EffectCube, EffectFlip, EffectCoverflow, EffectCards, EffectCreative, } = swiperModules;
|
|
5538
|
+
const { Navigation, Pagination, Scrollbar, Autoplay, Keyboard, Mousewheel, Zoom, Grid, Parallax, FreeMode, EffectFade, EffectCube, EffectFlip, EffectCoverflow, EffectCards, EffectCreative, } = swiperModules;
|
|
5526
5539
|
const modules = [];
|
|
5527
5540
|
if (this.enableNavigation)
|
|
5528
5541
|
modules.push(Navigation);
|
|
@@ -5542,6 +5555,8 @@ class SliderContainerComponent {
|
|
|
5542
5555
|
modules.push(Grid);
|
|
5543
5556
|
if (this.enableParallax)
|
|
5544
5557
|
modules.push(Parallax);
|
|
5558
|
+
if (this.freeMode)
|
|
5559
|
+
modules.push(FreeMode);
|
|
5545
5560
|
const effectMap = {
|
|
5546
5561
|
fade: EffectFade, cube: EffectCube, flip: EffectFlip,
|
|
5547
5562
|
coverflow: EffectCoverflow, cards: EffectCards, creative: EffectCreative,
|
|
@@ -5552,20 +5567,33 @@ class SliderContainerComponent {
|
|
|
5552
5567
|
const config = {
|
|
5553
5568
|
modules,
|
|
5554
5569
|
direction: this.direction,
|
|
5555
|
-
loop: this.loop,
|
|
5556
5570
|
slidesPerView: this.slidesPerView,
|
|
5571
|
+
slidesPerGroup: this.slidesPerGroup > 1 ? this.slidesPerGroup : 1,
|
|
5557
5572
|
spaceBetween: this.spaceBetween,
|
|
5558
5573
|
speed: this.speed,
|
|
5559
5574
|
effect: this.effect,
|
|
5560
5575
|
grabCursor: this.grabCursor,
|
|
5561
5576
|
centeredSlides: this.centeredSlides,
|
|
5562
5577
|
initialSlide: this.initialSlide,
|
|
5578
|
+
autoHeight: this.autoHeight,
|
|
5579
|
+
slideToClickedSlide: this.slideToClickedSlide,
|
|
5580
|
+
// loop / rewind mapping
|
|
5581
|
+
loop: this.loop === 'loop',
|
|
5582
|
+
rewind: this.loop === 'rewind',
|
|
5563
5583
|
};
|
|
5584
|
+
if (this.freeMode) {
|
|
5585
|
+
config['freeMode'] = true;
|
|
5586
|
+
}
|
|
5564
5587
|
if (this.enableNavigation) {
|
|
5565
5588
|
config['navigation'] = { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' };
|
|
5566
5589
|
}
|
|
5567
5590
|
if (this.enablePagination) {
|
|
5568
|
-
config['pagination'] = {
|
|
5591
|
+
config['pagination'] = {
|
|
5592
|
+
el: '.swiper-pagination',
|
|
5593
|
+
type: this.paginationType,
|
|
5594
|
+
clickable: this.paginationClickable,
|
|
5595
|
+
dynamicBullets: this.paginationDynamicBullets,
|
|
5596
|
+
};
|
|
5569
5597
|
}
|
|
5570
5598
|
if (this.enableScrollbar) {
|
|
5571
5599
|
config['scrollbar'] = { el: '.swiper-scrollbar', draggable: true };
|
|
@@ -5617,7 +5645,7 @@ class SliderContainerComponent {
|
|
|
5617
5645
|
}
|
|
5618
5646
|
}
|
|
5619
5647
|
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 }); }
|
|
5620
|
-
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", loop: "loop",
|
|
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: `
|
|
5621
5649
|
<!-- EDIT MODE: flat scrollable strip with drag-drop -->
|
|
5622
5650
|
<div *ngIf="!isPreview"
|
|
5623
5651
|
class="slider-edit-root"
|
|
@@ -5628,7 +5656,8 @@ class SliderContainerComponent {
|
|
|
5628
5656
|
[ioxDropzoneData]="children"
|
|
5629
5657
|
(ioxDrop)="onDrop($event)">
|
|
5630
5658
|
|
|
5631
|
-
<div class="slider-edit-track"
|
|
5659
|
+
<div class="slider-edit-track"
|
|
5660
|
+
[class.slider-edit-track--vertical]="direction === 'vertical'">
|
|
5632
5661
|
<div *ngFor="let child of children"
|
|
5633
5662
|
class="slider-edit-slide"
|
|
5634
5663
|
[ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
|
|
@@ -5655,7 +5684,10 @@ class SliderContainerComponent {
|
|
|
5655
5684
|
#swiperEl
|
|
5656
5685
|
class="swiper"
|
|
5657
5686
|
[ngClass]="['iox-node-' + nodeId]"
|
|
5658
|
-
[ngStyle]="style"
|
|
5687
|
+
[ngStyle]="style"
|
|
5688
|
+
[style.--swiper-navigation-color]="navigationColor || null"
|
|
5689
|
+
[style.--swiper-navigation-size.px]="navigationSize || null"
|
|
5690
|
+
[style.--swiper-pagination-color]="paginationColor || null">
|
|
5659
5691
|
<div class="swiper-wrapper">
|
|
5660
5692
|
<ng-container *ngFor="let child of children">
|
|
5661
5693
|
<ng-container
|
|
@@ -5671,7 +5703,7 @@ class SliderContainerComponent {
|
|
|
5671
5703
|
<div *ngIf="enablePagination" class="swiper-pagination"></div>
|
|
5672
5704
|
<div *ngIf="enableScrollbar" class="swiper-scrollbar"></div>
|
|
5673
5705
|
</div>
|
|
5674
|
-
`, isInline: true, styles: [".slider-edit-root{position:relative;box-sizing:border-box;overflow:hidden}.slider-edit-track{display:flex;flex-direction:row;gap:8px;overflow-x:auto;padding:4px;scrollbar-width:thin;min-height:100px}.slider-edit-slide{flex:0 0 auto;min-width:120px;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}.swiper{width:100%;height:100%;box-sizing:border-box}\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"] }] }); }
|
|
5706
|
+
`, isInline: true, styles: [".slider-edit-root{position:relative;box-sizing:border-box;overflow:hidden}.slider-edit-track{display:flex;flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;padding:4px;scrollbar-width:thin;min-height:100px}.slider-edit-track--vertical{flex-direction:column;overflow-x:hidden;overflow-y:auto;min-height:unset;min-width:100px}.slider-edit-slide{flex:0 0 auto;min-width:120px;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}.swiper{width:100%;height:100%;box-sizing:border-box}\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"] }] }); }
|
|
5675
5707
|
}
|
|
5676
5708
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderContainerComponent, decorators: [{
|
|
5677
5709
|
type: Component,
|
|
@@ -5686,7 +5718,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5686
5718
|
[ioxDropzoneData]="children"
|
|
5687
5719
|
(ioxDrop)="onDrop($event)">
|
|
5688
5720
|
|
|
5689
|
-
<div class="slider-edit-track"
|
|
5721
|
+
<div class="slider-edit-track"
|
|
5722
|
+
[class.slider-edit-track--vertical]="direction === 'vertical'">
|
|
5690
5723
|
<div *ngFor="let child of children"
|
|
5691
5724
|
class="slider-edit-slide"
|
|
5692
5725
|
[ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
|
|
@@ -5713,7 +5746,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5713
5746
|
#swiperEl
|
|
5714
5747
|
class="swiper"
|
|
5715
5748
|
[ngClass]="['iox-node-' + nodeId]"
|
|
5716
|
-
[ngStyle]="style"
|
|
5749
|
+
[ngStyle]="style"
|
|
5750
|
+
[style.--swiper-navigation-color]="navigationColor || null"
|
|
5751
|
+
[style.--swiper-navigation-size.px]="navigationSize || null"
|
|
5752
|
+
[style.--swiper-pagination-color]="paginationColor || null">
|
|
5717
5753
|
<div class="swiper-wrapper">
|
|
5718
5754
|
<ng-container *ngFor="let child of children">
|
|
5719
5755
|
<ng-container
|
|
@@ -5729,7 +5765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5729
5765
|
<div *ngIf="enablePagination" class="swiper-pagination"></div>
|
|
5730
5766
|
<div *ngIf="enableScrollbar" class="swiper-scrollbar"></div>
|
|
5731
5767
|
</div>
|
|
5732
|
-
`, standalone: false, styles: [".slider-edit-root{position:relative;box-sizing:border-box;overflow:hidden}.slider-edit-track{display:flex;flex-direction:row;gap:8px;overflow-x:auto;padding:4px;scrollbar-width:thin;min-height:100px}.slider-edit-slide{flex:0 0 auto;min-width:120px;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}.swiper{width:100%;height:100%;box-sizing:border-box}\n"] }]
|
|
5768
|
+
`, standalone: false, styles: [".slider-edit-root{position:relative;box-sizing:border-box;overflow:hidden}.slider-edit-track{display:flex;flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;padding:4px;scrollbar-width:thin;min-height:100px}.slider-edit-track--vertical{flex-direction:column;overflow-x:hidden;overflow-y:auto;min-height:unset;min-width:100px}.slider-edit-slide{flex:0 0 auto;min-width:120px;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}.swiper{width:100%;height:100%;box-sizing:border-box}\n"] }]
|
|
5733
5769
|
}], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
5734
5770
|
type: Optional
|
|
5735
5771
|
}, {
|
|
@@ -5745,39 +5781,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5745
5781
|
type: Input
|
|
5746
5782
|
}], direction: [{
|
|
5747
5783
|
type: Input
|
|
5784
|
+
}], slidesPerView: [{
|
|
5785
|
+
type: Input
|
|
5786
|
+
}], slidesPerGroup: [{
|
|
5787
|
+
type: Input
|
|
5748
5788
|
}], loop: [{
|
|
5749
5789
|
type: Input
|
|
5750
|
-
}],
|
|
5790
|
+
}], centeredSlides: [{
|
|
5751
5791
|
type: Input
|
|
5752
5792
|
}], spaceBetween: [{
|
|
5753
5793
|
type: Input
|
|
5754
|
-
}],
|
|
5794
|
+
}], initialSlide: [{
|
|
5755
5795
|
type: Input
|
|
5756
|
-
}],
|
|
5796
|
+
}], autoHeight: [{
|
|
5757
5797
|
type: Input
|
|
5758
5798
|
}], grabCursor: [{
|
|
5759
5799
|
type: Input
|
|
5760
|
-
}],
|
|
5800
|
+
}], slideToClickedSlide: [{
|
|
5761
5801
|
type: Input
|
|
5762
|
-
}],
|
|
5802
|
+
}], effect: [{
|
|
5803
|
+
type: Input
|
|
5804
|
+
}], speed: [{
|
|
5763
5805
|
type: Input
|
|
5764
5806
|
}], enableNavigation: [{
|
|
5765
5807
|
type: Input
|
|
5766
|
-
}],
|
|
5808
|
+
}], navigationColor: [{
|
|
5767
5809
|
type: Input
|
|
5768
|
-
}],
|
|
5810
|
+
}], navigationSize: [{
|
|
5769
5811
|
type: Input
|
|
5770
|
-
}],
|
|
5812
|
+
}], enablePagination: [{
|
|
5771
5813
|
type: Input
|
|
5772
|
-
}],
|
|
5814
|
+
}], paginationColor: [{
|
|
5773
5815
|
type: Input
|
|
5774
|
-
}],
|
|
5816
|
+
}], paginationType: [{
|
|
5775
5817
|
type: Input
|
|
5776
|
-
}],
|
|
5818
|
+
}], paginationClickable: [{
|
|
5777
5819
|
type: Input
|
|
5778
|
-
}],
|
|
5820
|
+
}], paginationDynamicBullets: [{
|
|
5779
5821
|
type: Input
|
|
5780
|
-
}],
|
|
5822
|
+
}], enableAutoplay: [{
|
|
5781
5823
|
type: Input
|
|
5782
5824
|
}], autoplayDelay: [{
|
|
5783
5825
|
type: Input
|
|
@@ -5785,9 +5827,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5785
5827
|
type: Input
|
|
5786
5828
|
}], autoplayDisableOnInteraction: [{
|
|
5787
5829
|
type: Input
|
|
5788
|
-
}],
|
|
5830
|
+
}], enableScrollbar: [{
|
|
5789
5831
|
type: Input
|
|
5790
|
-
}],
|
|
5832
|
+
}], freeMode: [{
|
|
5833
|
+
type: Input
|
|
5834
|
+
}], enableKeyboard: [{
|
|
5835
|
+
type: Input
|
|
5836
|
+
}], enableMousewheel: [{
|
|
5837
|
+
type: Input
|
|
5838
|
+
}], enableZoom: [{
|
|
5839
|
+
type: Input
|
|
5840
|
+
}], enableParallax: [{
|
|
5841
|
+
type: Input
|
|
5842
|
+
}], enableGrid: [{
|
|
5791
5843
|
type: Input
|
|
5792
5844
|
}], gridRows: [{
|
|
5793
5845
|
type: Input
|
|
@@ -5818,6 +5870,10 @@ class SliderSlideComponent {
|
|
|
5818
5870
|
this.childMouseLeave = new EventEmitter();
|
|
5819
5871
|
this.isPreview = !!isPreview;
|
|
5820
5872
|
}
|
|
5873
|
+
get slideEditStyle() {
|
|
5874
|
+
const { width, minWidth, maxWidth, ...rest } = this.style || {};
|
|
5875
|
+
return rest;
|
|
5876
|
+
}
|
|
5821
5877
|
ngOnInit() { }
|
|
5822
5878
|
ngOnDestroy() { }
|
|
5823
5879
|
onDrop(event) {
|
|
@@ -5854,11 +5910,14 @@ class SliderSlideComponent {
|
|
|
5854
5910
|
</div>
|
|
5855
5911
|
</div>
|
|
5856
5912
|
|
|
5857
|
-
<!-- EDIT: plain block so it sits in the horizontal strip
|
|
5913
|
+
<!-- EDIT: plain block so it sits in the horizontal strip.
|
|
5914
|
+
Width/min-width/max-width are stripped from ngStyle here — they belong on the
|
|
5915
|
+
iox-outer-* wrapper (already applied by StyleRegistryService), not on this inner
|
|
5916
|
+
div. Applying them here too would make the content 33% of 33%. -->
|
|
5858
5917
|
<div *ngIf="!isPreview"
|
|
5859
5918
|
class="slide-edit-block"
|
|
5860
5919
|
[ngClass]="['iox-node-' + nodeId]"
|
|
5861
|
-
[ngStyle]="
|
|
5920
|
+
[ngStyle]="slideEditStyle"
|
|
5862
5921
|
ioxDropzone
|
|
5863
5922
|
[ioxDropzoneId]="dropListId"
|
|
5864
5923
|
[ioxDropzoneData]="children"
|
|
@@ -5882,7 +5941,7 @@ class SliderSlideComponent {
|
|
|
5882
5941
|
</ng-container>
|
|
5883
5942
|
</div>
|
|
5884
5943
|
</div>
|
|
5885
|
-
`, isInline: true, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden}.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"] }] }); }
|
|
5944
|
+
`, isInline: true, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden}.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"] }] }); }
|
|
5886
5945
|
}
|
|
5887
5946
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderSlideComponent, decorators: [{
|
|
5888
5947
|
type: Component,
|
|
@@ -5916,11 +5975,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5916
5975
|
</div>
|
|
5917
5976
|
</div>
|
|
5918
5977
|
|
|
5919
|
-
<!-- EDIT: plain block so it sits in the horizontal strip
|
|
5978
|
+
<!-- EDIT: plain block so it sits in the horizontal strip.
|
|
5979
|
+
Width/min-width/max-width are stripped from ngStyle here — they belong on the
|
|
5980
|
+
iox-outer-* wrapper (already applied by StyleRegistryService), not on this inner
|
|
5981
|
+
div. Applying them here too would make the content 33% of 33%. -->
|
|
5920
5982
|
<div *ngIf="!isPreview"
|
|
5921
5983
|
class="slide-edit-block"
|
|
5922
5984
|
[ngClass]="['iox-node-' + nodeId]"
|
|
5923
|
-
[ngStyle]="
|
|
5985
|
+
[ngStyle]="slideEditStyle"
|
|
5924
5986
|
ioxDropzone
|
|
5925
5987
|
[ioxDropzoneId]="dropListId"
|
|
5926
5988
|
[ioxDropzoneData]="children"
|
|
@@ -5944,7 +6006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5944
6006
|
</ng-container>
|
|
5945
6007
|
</div>
|
|
5946
6008
|
</div>
|
|
5947
|
-
`, standalone: false, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden}.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"] }]
|
|
6009
|
+
`, standalone: false, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden}.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"] }]
|
|
5948
6010
|
}], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
5949
6011
|
type: Optional
|
|
5950
6012
|
}, {
|
|
@@ -6858,19 +6920,11 @@ class SliderContainerConfig extends ComponentConfig {
|
|
|
6858
6920
|
{ value: 'swiperAutoplayPause', label: 'Pause Autoplay' },
|
|
6859
6921
|
];
|
|
6860
6922
|
this.traits = [
|
|
6861
|
-
// ──
|
|
6862
|
-
new TraitConfig('
|
|
6863
|
-
new TraitConfig('
|
|
6864
|
-
{ label: 'Slide', value: 'slide' },
|
|
6865
|
-
{ label: 'Fade', value: 'fade' },
|
|
6866
|
-
{ label: 'Cube', value: 'cube' },
|
|
6867
|
-
{ label: 'Coverflow', value: 'coverflow' },
|
|
6868
|
-
{ label: 'Flip', value: 'flip' },
|
|
6869
|
-
{ label: 'Cards', value: 'cards' },
|
|
6870
|
-
{ label: 'Creative', value: 'creative' },
|
|
6871
|
-
], 'slide'),
|
|
6923
|
+
// ── Parameters ────────────────────────────────────────────────────
|
|
6924
|
+
new TraitConfig('__paramsLabel', 'Parameters', TraitInputType.SectionLabel),
|
|
6925
|
+
new TraitConfig('direction', 'Slide direction', TraitInputType.Select, [{ label: 'Horizontal', value: 'horizontal' }, { label: 'Vertical', value: 'vertical' }], 'horizontal'),
|
|
6872
6926
|
new TraitConfig('slidesPerView', 'Slides per view', TraitInputType.Select, [
|
|
6873
|
-
{ label: 'Auto (
|
|
6927
|
+
{ label: 'Auto (slide width)', value: 'auto' },
|
|
6874
6928
|
{ label: '1', value: 1 },
|
|
6875
6929
|
{ label: '2', value: 2 },
|
|
6876
6930
|
{ label: '3', value: 3 },
|
|
@@ -6878,42 +6932,66 @@ class SliderContainerConfig extends ComponentConfig {
|
|
|
6878
6932
|
{ label: '5', value: 5 },
|
|
6879
6933
|
{ label: '6', value: 6 },
|
|
6880
6934
|
], 'auto'),
|
|
6881
|
-
new TraitConfig('
|
|
6882
|
-
new TraitConfig('
|
|
6883
|
-
|
|
6884
|
-
|
|
6935
|
+
new TraitConfig('slidesPerGroup', 'Slides per group', TraitInputType.Scrub, undefined, 1),
|
|
6936
|
+
new TraitConfig('loop', 'Loop', TraitInputType.SelectButton, [
|
|
6937
|
+
{ label: 'Off', value: 'off' },
|
|
6938
|
+
{ label: 'Loop', value: 'loop' },
|
|
6939
|
+
{ label: 'Rewind', value: 'rewind' },
|
|
6940
|
+
], 'off'),
|
|
6885
6941
|
new TraitConfig('centeredSlides', 'Centered slides', TraitInputType.Checkbox, undefined, false),
|
|
6942
|
+
new TraitConfig('spaceBetween', 'Space between (px)', TraitInputType.Scrub, undefined, 0),
|
|
6943
|
+
new TraitConfig('initialSlide', 'Initial slide', TraitInputType.Scrub, undefined, 0),
|
|
6944
|
+
new TraitConfig('autoHeight', 'Auto height', TraitInputType.Checkbox, undefined, false),
|
|
6886
6945
|
new TraitConfig('grabCursor', 'Grab cursor', TraitInputType.Checkbox, undefined, true),
|
|
6887
|
-
|
|
6888
|
-
|
|
6889
|
-
|
|
6946
|
+
new TraitConfig('slideToClickedSlide', 'Slide to clicked slide', TraitInputType.Checkbox, undefined, false),
|
|
6947
|
+
// ── Effects ───────────────────────────────────────────────────────
|
|
6948
|
+
new TraitConfig('__effectsLabel', 'Effects', TraitInputType.SectionLabel),
|
|
6949
|
+
new TraitConfig('effect', 'Effect', TraitInputType.Select, [
|
|
6950
|
+
{ label: 'Slide', value: 'slide' },
|
|
6951
|
+
{ label: 'Fade', value: 'fade' },
|
|
6952
|
+
{ label: 'Cube', value: 'cube' },
|
|
6953
|
+
{ label: 'Coverflow', value: 'coverflow' },
|
|
6954
|
+
{ label: 'Flip', value: 'flip' },
|
|
6955
|
+
{ label: 'Cards', value: 'cards' },
|
|
6956
|
+
{ label: 'Creative', value: 'creative' },
|
|
6957
|
+
], 'slide'),
|
|
6958
|
+
new TraitConfig('speed', 'Transition duration (ms)', TraitInputType.Scrub, undefined, 300),
|
|
6959
|
+
// ── Navigation ────────────────────────────────────────────────────
|
|
6960
|
+
new TraitConfig('__navLabel', 'Navigation', TraitInputType.SectionLabel),
|
|
6890
6961
|
new TraitConfig('enableNavigation', 'Navigation arrows', TraitInputType.Checkbox, undefined, false),
|
|
6962
|
+
new TraitConfig('navigationColor', 'Color', TraitInputType.Color, undefined, '#ffffff', undefined, { trait: 'enableNavigation', values: 'true' }),
|
|
6963
|
+
new TraitConfig('navigationSize', 'Size (px)', TraitInputType.Scrub, undefined, 44, undefined, { trait: 'enableNavigation', values: 'true' }),
|
|
6964
|
+
// ── Pagination ────────────────────────────────────────────────────
|
|
6965
|
+
new TraitConfig('__paginationLabel', 'Pagination', TraitInputType.SectionLabel),
|
|
6891
6966
|
new TraitConfig('enablePagination', 'Pagination', TraitInputType.Checkbox, undefined, false),
|
|
6892
|
-
new TraitConfig('
|
|
6967
|
+
new TraitConfig('paginationColor', 'Color', TraitInputType.Color, undefined, '#ffffff', undefined, { trait: 'enablePagination', values: 'true' }),
|
|
6968
|
+
new TraitConfig('paginationType', 'Type', TraitInputType.SelectButton, [
|
|
6969
|
+
{ label: '•••', value: 'bullets' },
|
|
6970
|
+
{ label: '—', value: 'progressbar' },
|
|
6971
|
+
{ label: '1/5', value: 'fraction' },
|
|
6972
|
+
], 'bullets', undefined, { trait: 'enablePagination', values: 'true' }),
|
|
6973
|
+
new TraitConfig('paginationClickable', 'Clickable', TraitInputType.Checkbox, undefined, true, undefined, { trait: 'enablePagination', values: 'true' }),
|
|
6974
|
+
new TraitConfig('paginationDynamicBullets', 'Dynamic bullets', TraitInputType.Checkbox, undefined, false, undefined, { trait: 'enablePagination', values: 'true' }),
|
|
6975
|
+
// ── Autoplay ──────────────────────────────────────────────────────
|
|
6976
|
+
new TraitConfig('__autoplayLabel', 'Autoplay', TraitInputType.SectionLabel),
|
|
6893
6977
|
new TraitConfig('enableAutoplay', 'Autoplay', TraitInputType.Checkbox, undefined, false),
|
|
6978
|
+
new TraitConfig('autoplayDelay', 'Delay (ms)', TraitInputType.Scrub, undefined, 3000, undefined, { trait: 'enableAutoplay', values: 'true' }),
|
|
6979
|
+
new TraitConfig('autoplayPauseOnMouseEnter', 'Pause on hover', TraitInputType.Checkbox, undefined, true, undefined, { trait: 'enableAutoplay', values: 'true' }),
|
|
6980
|
+
new TraitConfig('autoplayDisableOnInteraction', 'Disable on interact', TraitInputType.Checkbox, undefined, false, undefined, { trait: 'enableAutoplay', values: 'true' }),
|
|
6981
|
+
// ── Modules ───────────────────────────────────────────────────────
|
|
6982
|
+
new TraitConfig('__modulesLabel', 'Modules', TraitInputType.SectionLabel),
|
|
6983
|
+
new TraitConfig('enableScrollbar', 'Scrollbar', TraitInputType.Checkbox, undefined, false),
|
|
6984
|
+
new TraitConfig('freeMode', 'Free mode', TraitInputType.Checkbox, undefined, false),
|
|
6894
6985
|
new TraitConfig('enableKeyboard', 'Keyboard control', TraitInputType.Checkbox, undefined, false),
|
|
6895
|
-
new TraitConfig('enableMousewheel', 'Mousewheel
|
|
6986
|
+
new TraitConfig('enableMousewheel', 'Mousewheel', TraitInputType.Checkbox, undefined, false),
|
|
6896
6987
|
new TraitConfig('enableZoom', 'Zoom', TraitInputType.Checkbox, undefined, false),
|
|
6897
|
-
new TraitConfig('enableGrid', 'Grid (multi-row)', TraitInputType.Checkbox, undefined, false),
|
|
6898
6988
|
new TraitConfig('enableParallax', 'Parallax', TraitInputType.Checkbox, undefined, false),
|
|
6899
|
-
// ──
|
|
6900
|
-
new TraitConfig('
|
|
6901
|
-
|
|
6902
|
-
new TraitConfig('
|
|
6903
|
-
|
|
6904
|
-
|
|
6905
|
-
new TraitConfig('__autoplayLabel', 'Autoplay options', TraitInputType.SectionLabel),
|
|
6906
|
-
// ── Autoplay sub-options ──────────────────────────
|
|
6907
|
-
new TraitConfig('autoplayDelay', 'Delay (ms)', TraitInputType.Number, undefined, 3000),
|
|
6908
|
-
new TraitConfig('autoplayPauseOnMouseEnter', 'Pause on hover', TraitInputType.Checkbox, undefined, true),
|
|
6909
|
-
new TraitConfig('autoplayDisableOnInteraction', 'Disable on interact', TraitInputType.Checkbox, undefined, false),
|
|
6910
|
-
// ── Section label ─────────────────────────────────
|
|
6911
|
-
new TraitConfig('__gridLabel', 'Grid options', TraitInputType.SectionLabel),
|
|
6912
|
-
// ── Grid sub-options ──────────────────────────────
|
|
6913
|
-
new TraitConfig('gridRows', 'Rows', TraitInputType.Number, undefined, 1),
|
|
6914
|
-
// ── Section label ─────────────────────────────────
|
|
6915
|
-
new TraitConfig('__responsiveLabel', 'Responsive breakpoints', TraitInputType.SectionLabel),
|
|
6916
|
-
// ── Responsive ────────────────────────────────────
|
|
6989
|
+
// ── Grid ──────────────────────────────────────────────────────────
|
|
6990
|
+
new TraitConfig('__gridLabel', 'Grid', TraitInputType.SectionLabel),
|
|
6991
|
+
new TraitConfig('enableGrid', 'Grid (multi-row)', TraitInputType.Checkbox, undefined, false),
|
|
6992
|
+
new TraitConfig('gridRows', 'Rows', TraitInputType.Scrub, undefined, 2, undefined, { trait: 'enableGrid', values: 'true' }),
|
|
6993
|
+
// ── Responsive ────────────────────────────────────────────────────
|
|
6994
|
+
new TraitConfig('__responsiveLabel', 'Responsive', TraitInputType.SectionLabel),
|
|
6917
6995
|
new TraitConfig('breakpoints', 'Breakpoints (JSON)', TraitInputType.Textarea, undefined, ''),
|
|
6918
6996
|
];
|
|
6919
6997
|
this.styleTraits = [
|