@vectoriox/iox-builder 1.4.83 → 1.4.85
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,9 @@ 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'"
|
|
5661
|
+
[style.gap.px]="spaceBetween || 8">
|
|
5632
5662
|
<div *ngFor="let child of children"
|
|
5633
5663
|
class="slider-edit-slide"
|
|
5634
5664
|
[ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
|
|
@@ -5648,6 +5678,19 @@ class SliderContainerComponent {
|
|
|
5648
5678
|
<span>Click + in toolbar to add a slide</span>
|
|
5649
5679
|
</div>
|
|
5650
5680
|
</div>
|
|
5681
|
+
|
|
5682
|
+
<!-- Edit-mode nav indicators (non-interactive) -->
|
|
5683
|
+
<div *ngIf="enableNavigation" class="slider-edit-nav-preview">
|
|
5684
|
+
<button class="slider-edit-nav-btn" disabled><i class="ph-thin ph-caret-left"></i></button>
|
|
5685
|
+
<button class="slider-edit-nav-btn" disabled><i class="ph-thin ph-caret-right"></i></button>
|
|
5686
|
+
</div>
|
|
5687
|
+
|
|
5688
|
+
<!-- Edit-mode pagination indicator -->
|
|
5689
|
+
<div *ngIf="enablePagination" class="slider-edit-pagination-preview">
|
|
5690
|
+
<span class="slider-edit-dot slider-edit-dot--active"></span>
|
|
5691
|
+
<span class="slider-edit-dot"></span>
|
|
5692
|
+
<span class="slider-edit-dot"></span>
|
|
5693
|
+
</div>
|
|
5651
5694
|
</div>
|
|
5652
5695
|
|
|
5653
5696
|
<!-- PREVIEW MODE: real Swiper DOM structure -->
|
|
@@ -5655,7 +5698,10 @@ class SliderContainerComponent {
|
|
|
5655
5698
|
#swiperEl
|
|
5656
5699
|
class="swiper"
|
|
5657
5700
|
[ngClass]="['iox-node-' + nodeId]"
|
|
5658
|
-
[ngStyle]="style"
|
|
5701
|
+
[ngStyle]="style"
|
|
5702
|
+
[style.--swiper-navigation-color]="navigationColor || null"
|
|
5703
|
+
[style.--swiper-navigation-size.px]="navigationSize || null"
|
|
5704
|
+
[style.--swiper-pagination-color]="paginationColor || null">
|
|
5659
5705
|
<div class="swiper-wrapper">
|
|
5660
5706
|
<ng-container *ngFor="let child of children">
|
|
5661
5707
|
<ng-container
|
|
@@ -5671,7 +5717,7 @@ class SliderContainerComponent {
|
|
|
5671
5717
|
<div *ngIf="enablePagination" class="swiper-pagination"></div>
|
|
5672
5718
|
<div *ngIf="enableScrollbar" class="swiper-scrollbar"></div>
|
|
5673
5719
|
</div>
|
|
5674
|
-
`, isInline: true, styles: [".slider-edit-root{position:relative;box-sizing:border-box;overflow:hidden}.slider-edit-track{display:flex;flex-direction:row;
|
|
5720
|
+
`, isInline: true, styles: [".slider-edit-root{position:relative;box-sizing:border-box;overflow:hidden}.slider-edit-track{display:flex;flex-direction:row;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}.slider-edit-nav-preview{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;padding:0 8px}.slider-edit-nav-btn{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;opacity:.75;cursor:default}.slider-edit-pagination-preview{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:6px;align-items:center;pointer-events:none}.slider-edit-dot{width:7px;height:7px;border-radius:50%;background:#00000059}.slider-edit-dot--active{background:#000000bf;width:9px;height:9px}.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
5721
|
}
|
|
5676
5722
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderContainerComponent, decorators: [{
|
|
5677
5723
|
type: Component,
|
|
@@ -5686,7 +5732,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5686
5732
|
[ioxDropzoneData]="children"
|
|
5687
5733
|
(ioxDrop)="onDrop($event)">
|
|
5688
5734
|
|
|
5689
|
-
<div class="slider-edit-track"
|
|
5735
|
+
<div class="slider-edit-track"
|
|
5736
|
+
[class.slider-edit-track--vertical]="direction === 'vertical'"
|
|
5737
|
+
[style.gap.px]="spaceBetween || 8">
|
|
5690
5738
|
<div *ngFor="let child of children"
|
|
5691
5739
|
class="slider-edit-slide"
|
|
5692
5740
|
[ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
|
|
@@ -5706,6 +5754,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5706
5754
|
<span>Click + in toolbar to add a slide</span>
|
|
5707
5755
|
</div>
|
|
5708
5756
|
</div>
|
|
5757
|
+
|
|
5758
|
+
<!-- Edit-mode nav indicators (non-interactive) -->
|
|
5759
|
+
<div *ngIf="enableNavigation" class="slider-edit-nav-preview">
|
|
5760
|
+
<button class="slider-edit-nav-btn" disabled><i class="ph-thin ph-caret-left"></i></button>
|
|
5761
|
+
<button class="slider-edit-nav-btn" disabled><i class="ph-thin ph-caret-right"></i></button>
|
|
5762
|
+
</div>
|
|
5763
|
+
|
|
5764
|
+
<!-- Edit-mode pagination indicator -->
|
|
5765
|
+
<div *ngIf="enablePagination" class="slider-edit-pagination-preview">
|
|
5766
|
+
<span class="slider-edit-dot slider-edit-dot--active"></span>
|
|
5767
|
+
<span class="slider-edit-dot"></span>
|
|
5768
|
+
<span class="slider-edit-dot"></span>
|
|
5769
|
+
</div>
|
|
5709
5770
|
</div>
|
|
5710
5771
|
|
|
5711
5772
|
<!-- PREVIEW MODE: real Swiper DOM structure -->
|
|
@@ -5713,7 +5774,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5713
5774
|
#swiperEl
|
|
5714
5775
|
class="swiper"
|
|
5715
5776
|
[ngClass]="['iox-node-' + nodeId]"
|
|
5716
|
-
[ngStyle]="style"
|
|
5777
|
+
[ngStyle]="style"
|
|
5778
|
+
[style.--swiper-navigation-color]="navigationColor || null"
|
|
5779
|
+
[style.--swiper-navigation-size.px]="navigationSize || null"
|
|
5780
|
+
[style.--swiper-pagination-color]="paginationColor || null">
|
|
5717
5781
|
<div class="swiper-wrapper">
|
|
5718
5782
|
<ng-container *ngFor="let child of children">
|
|
5719
5783
|
<ng-container
|
|
@@ -5729,7 +5793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5729
5793
|
<div *ngIf="enablePagination" class="swiper-pagination"></div>
|
|
5730
5794
|
<div *ngIf="enableScrollbar" class="swiper-scrollbar"></div>
|
|
5731
5795
|
</div>
|
|
5732
|
-
`, standalone: false, styles: [".slider-edit-root{position:relative;box-sizing:border-box;overflow:hidden}.slider-edit-track{display:flex;flex-direction:row;
|
|
5796
|
+
`, standalone: false, styles: [".slider-edit-root{position:relative;box-sizing:border-box;overflow:hidden}.slider-edit-track{display:flex;flex-direction:row;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}.slider-edit-nav-preview{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;padding:0 8px}.slider-edit-nav-btn{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;opacity:.75;cursor:default}.slider-edit-pagination-preview{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:6px;align-items:center;pointer-events:none}.slider-edit-dot{width:7px;height:7px;border-radius:50%;background:#00000059}.slider-edit-dot--active{background:#000000bf;width:9px;height:9px}.swiper{width:100%;height:100%;box-sizing:border-box}\n"] }]
|
|
5733
5797
|
}], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
5734
5798
|
type: Optional
|
|
5735
5799
|
}, {
|
|
@@ -5745,39 +5809,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5745
5809
|
type: Input
|
|
5746
5810
|
}], direction: [{
|
|
5747
5811
|
type: Input
|
|
5812
|
+
}], slidesPerView: [{
|
|
5813
|
+
type: Input
|
|
5814
|
+
}], slidesPerGroup: [{
|
|
5815
|
+
type: Input
|
|
5748
5816
|
}], loop: [{
|
|
5749
5817
|
type: Input
|
|
5750
|
-
}],
|
|
5818
|
+
}], centeredSlides: [{
|
|
5751
5819
|
type: Input
|
|
5752
5820
|
}], spaceBetween: [{
|
|
5753
5821
|
type: Input
|
|
5754
|
-
}],
|
|
5822
|
+
}], initialSlide: [{
|
|
5755
5823
|
type: Input
|
|
5756
|
-
}],
|
|
5824
|
+
}], autoHeight: [{
|
|
5757
5825
|
type: Input
|
|
5758
5826
|
}], grabCursor: [{
|
|
5759
5827
|
type: Input
|
|
5760
|
-
}],
|
|
5828
|
+
}], slideToClickedSlide: [{
|
|
5761
5829
|
type: Input
|
|
5762
|
-
}],
|
|
5830
|
+
}], effect: [{
|
|
5831
|
+
type: Input
|
|
5832
|
+
}], speed: [{
|
|
5763
5833
|
type: Input
|
|
5764
5834
|
}], enableNavigation: [{
|
|
5765
5835
|
type: Input
|
|
5766
|
-
}],
|
|
5836
|
+
}], navigationColor: [{
|
|
5767
5837
|
type: Input
|
|
5768
|
-
}],
|
|
5838
|
+
}], navigationSize: [{
|
|
5769
5839
|
type: Input
|
|
5770
|
-
}],
|
|
5840
|
+
}], enablePagination: [{
|
|
5771
5841
|
type: Input
|
|
5772
|
-
}],
|
|
5842
|
+
}], paginationColor: [{
|
|
5773
5843
|
type: Input
|
|
5774
|
-
}],
|
|
5844
|
+
}], paginationType: [{
|
|
5775
5845
|
type: Input
|
|
5776
|
-
}],
|
|
5846
|
+
}], paginationClickable: [{
|
|
5777
5847
|
type: Input
|
|
5778
|
-
}],
|
|
5848
|
+
}], paginationDynamicBullets: [{
|
|
5779
5849
|
type: Input
|
|
5780
|
-
}],
|
|
5850
|
+
}], enableAutoplay: [{
|
|
5781
5851
|
type: Input
|
|
5782
5852
|
}], autoplayDelay: [{
|
|
5783
5853
|
type: Input
|
|
@@ -5785,9 +5855,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5785
5855
|
type: Input
|
|
5786
5856
|
}], autoplayDisableOnInteraction: [{
|
|
5787
5857
|
type: Input
|
|
5788
|
-
}],
|
|
5858
|
+
}], enableScrollbar: [{
|
|
5789
5859
|
type: Input
|
|
5790
|
-
}],
|
|
5860
|
+
}], freeMode: [{
|
|
5861
|
+
type: Input
|
|
5862
|
+
}], enableKeyboard: [{
|
|
5863
|
+
type: Input
|
|
5864
|
+
}], enableMousewheel: [{
|
|
5865
|
+
type: Input
|
|
5866
|
+
}], enableZoom: [{
|
|
5867
|
+
type: Input
|
|
5868
|
+
}], enableParallax: [{
|
|
5869
|
+
type: Input
|
|
5870
|
+
}], enableGrid: [{
|
|
5791
5871
|
type: Input
|
|
5792
5872
|
}], gridRows: [{
|
|
5793
5873
|
type: Input
|
|
@@ -6868,19 +6948,11 @@ class SliderContainerConfig extends ComponentConfig {
|
|
|
6868
6948
|
{ value: 'swiperAutoplayPause', label: 'Pause Autoplay' },
|
|
6869
6949
|
];
|
|
6870
6950
|
this.traits = [
|
|
6871
|
-
// ──
|
|
6872
|
-
new TraitConfig('
|
|
6873
|
-
new TraitConfig('
|
|
6874
|
-
{ label: 'Slide', value: 'slide' },
|
|
6875
|
-
{ label: 'Fade', value: 'fade' },
|
|
6876
|
-
{ label: 'Cube', value: 'cube' },
|
|
6877
|
-
{ label: 'Coverflow', value: 'coverflow' },
|
|
6878
|
-
{ label: 'Flip', value: 'flip' },
|
|
6879
|
-
{ label: 'Cards', value: 'cards' },
|
|
6880
|
-
{ label: 'Creative', value: 'creative' },
|
|
6881
|
-
], 'slide'),
|
|
6951
|
+
// ── Parameters ────────────────────────────────────────────────────
|
|
6952
|
+
new TraitConfig('__paramsLabel', 'Parameters', TraitInputType.SectionLabel),
|
|
6953
|
+
new TraitConfig('direction', 'Slide direction', TraitInputType.Select, [{ label: 'Horizontal', value: 'horizontal' }, { label: 'Vertical', value: 'vertical' }], 'horizontal'),
|
|
6882
6954
|
new TraitConfig('slidesPerView', 'Slides per view', TraitInputType.Select, [
|
|
6883
|
-
{ label: 'Auto (
|
|
6955
|
+
{ label: 'Auto (slide width)', value: 'auto' },
|
|
6884
6956
|
{ label: '1', value: 1 },
|
|
6885
6957
|
{ label: '2', value: 2 },
|
|
6886
6958
|
{ label: '3', value: 3 },
|
|
@@ -6888,42 +6960,66 @@ class SliderContainerConfig extends ComponentConfig {
|
|
|
6888
6960
|
{ label: '5', value: 5 },
|
|
6889
6961
|
{ label: '6', value: 6 },
|
|
6890
6962
|
], 'auto'),
|
|
6891
|
-
new TraitConfig('
|
|
6892
|
-
new TraitConfig('
|
|
6893
|
-
|
|
6894
|
-
|
|
6963
|
+
new TraitConfig('slidesPerGroup', 'Slides per group', TraitInputType.Scrub, undefined, 1),
|
|
6964
|
+
new TraitConfig('loop', 'Loop', TraitInputType.SelectButton, [
|
|
6965
|
+
{ label: 'Off', value: 'off' },
|
|
6966
|
+
{ label: 'Loop', value: 'loop' },
|
|
6967
|
+
{ label: 'Rewind', value: 'rewind' },
|
|
6968
|
+
], 'off'),
|
|
6895
6969
|
new TraitConfig('centeredSlides', 'Centered slides', TraitInputType.Checkbox, undefined, false),
|
|
6970
|
+
new TraitConfig('spaceBetween', 'Space between (px)', TraitInputType.Scrub, undefined, 0),
|
|
6971
|
+
new TraitConfig('initialSlide', 'Initial slide', TraitInputType.Scrub, undefined, 0),
|
|
6972
|
+
new TraitConfig('autoHeight', 'Auto height', TraitInputType.Checkbox, undefined, false),
|
|
6896
6973
|
new TraitConfig('grabCursor', 'Grab cursor', TraitInputType.Checkbox, undefined, true),
|
|
6897
|
-
|
|
6898
|
-
|
|
6899
|
-
|
|
6974
|
+
new TraitConfig('slideToClickedSlide', 'Slide to clicked slide', TraitInputType.Checkbox, undefined, false),
|
|
6975
|
+
// ── Effects ───────────────────────────────────────────────────────
|
|
6976
|
+
new TraitConfig('__effectsLabel', 'Effects', TraitInputType.SectionLabel),
|
|
6977
|
+
new TraitConfig('effect', 'Effect', TraitInputType.Select, [
|
|
6978
|
+
{ label: 'Slide', value: 'slide' },
|
|
6979
|
+
{ label: 'Fade', value: 'fade' },
|
|
6980
|
+
{ label: 'Cube', value: 'cube' },
|
|
6981
|
+
{ label: 'Coverflow', value: 'coverflow' },
|
|
6982
|
+
{ label: 'Flip', value: 'flip' },
|
|
6983
|
+
{ label: 'Cards', value: 'cards' },
|
|
6984
|
+
{ label: 'Creative', value: 'creative' },
|
|
6985
|
+
], 'slide'),
|
|
6986
|
+
new TraitConfig('speed', 'Transition duration (ms)', TraitInputType.Scrub, undefined, 300),
|
|
6987
|
+
// ── Navigation ────────────────────────────────────────────────────
|
|
6988
|
+
new TraitConfig('__navLabel', 'Navigation', TraitInputType.SectionLabel),
|
|
6900
6989
|
new TraitConfig('enableNavigation', 'Navigation arrows', TraitInputType.Checkbox, undefined, false),
|
|
6990
|
+
new TraitConfig('navigationColor', 'Color', TraitInputType.Color, undefined, '#ffffff', undefined, { trait: 'enableNavigation', values: 'true' }),
|
|
6991
|
+
new TraitConfig('navigationSize', 'Size (px)', TraitInputType.Scrub, undefined, 44, undefined, { trait: 'enableNavigation', values: 'true' }),
|
|
6992
|
+
// ── Pagination ────────────────────────────────────────────────────
|
|
6993
|
+
new TraitConfig('__paginationLabel', 'Pagination', TraitInputType.SectionLabel),
|
|
6901
6994
|
new TraitConfig('enablePagination', 'Pagination', TraitInputType.Checkbox, undefined, false),
|
|
6902
|
-
new TraitConfig('
|
|
6995
|
+
new TraitConfig('paginationColor', 'Color', TraitInputType.Color, undefined, '#ffffff', undefined, { trait: 'enablePagination', values: 'true' }),
|
|
6996
|
+
new TraitConfig('paginationType', 'Type', TraitInputType.SelectButton, [
|
|
6997
|
+
{ label: '•••', value: 'bullets' },
|
|
6998
|
+
{ label: '—', value: 'progressbar' },
|
|
6999
|
+
{ label: '1/5', value: 'fraction' },
|
|
7000
|
+
], 'bullets', undefined, { trait: 'enablePagination', values: 'true' }),
|
|
7001
|
+
new TraitConfig('paginationClickable', 'Clickable', TraitInputType.Checkbox, undefined, true, undefined, { trait: 'enablePagination', values: 'true' }),
|
|
7002
|
+
new TraitConfig('paginationDynamicBullets', 'Dynamic bullets', TraitInputType.Checkbox, undefined, false, undefined, { trait: 'enablePagination', values: 'true' }),
|
|
7003
|
+
// ── Autoplay ──────────────────────────────────────────────────────
|
|
7004
|
+
new TraitConfig('__autoplayLabel', 'Autoplay', TraitInputType.SectionLabel),
|
|
6903
7005
|
new TraitConfig('enableAutoplay', 'Autoplay', TraitInputType.Checkbox, undefined, false),
|
|
7006
|
+
new TraitConfig('autoplayDelay', 'Delay (ms)', TraitInputType.Scrub, undefined, 3000, undefined, { trait: 'enableAutoplay', values: 'true' }),
|
|
7007
|
+
new TraitConfig('autoplayPauseOnMouseEnter', 'Pause on hover', TraitInputType.Checkbox, undefined, true, undefined, { trait: 'enableAutoplay', values: 'true' }),
|
|
7008
|
+
new TraitConfig('autoplayDisableOnInteraction', 'Disable on interact', TraitInputType.Checkbox, undefined, false, undefined, { trait: 'enableAutoplay', values: 'true' }),
|
|
7009
|
+
// ── Modules ───────────────────────────────────────────────────────
|
|
7010
|
+
new TraitConfig('__modulesLabel', 'Modules', TraitInputType.SectionLabel),
|
|
7011
|
+
new TraitConfig('enableScrollbar', 'Scrollbar', TraitInputType.Checkbox, undefined, false),
|
|
7012
|
+
new TraitConfig('freeMode', 'Free mode', TraitInputType.Checkbox, undefined, false),
|
|
6904
7013
|
new TraitConfig('enableKeyboard', 'Keyboard control', TraitInputType.Checkbox, undefined, false),
|
|
6905
|
-
new TraitConfig('enableMousewheel', 'Mousewheel
|
|
7014
|
+
new TraitConfig('enableMousewheel', 'Mousewheel', TraitInputType.Checkbox, undefined, false),
|
|
6906
7015
|
new TraitConfig('enableZoom', 'Zoom', TraitInputType.Checkbox, undefined, false),
|
|
6907
|
-
new TraitConfig('enableGrid', 'Grid (multi-row)', TraitInputType.Checkbox, undefined, false),
|
|
6908
7016
|
new TraitConfig('enableParallax', 'Parallax', TraitInputType.Checkbox, undefined, false),
|
|
6909
|
-
// ──
|
|
6910
|
-
new TraitConfig('
|
|
6911
|
-
|
|
6912
|
-
new TraitConfig('
|
|
6913
|
-
|
|
6914
|
-
|
|
6915
|
-
new TraitConfig('__autoplayLabel', 'Autoplay options', TraitInputType.SectionLabel),
|
|
6916
|
-
// ── Autoplay sub-options ──────────────────────────
|
|
6917
|
-
new TraitConfig('autoplayDelay', 'Delay (ms)', TraitInputType.Number, undefined, 3000),
|
|
6918
|
-
new TraitConfig('autoplayPauseOnMouseEnter', 'Pause on hover', TraitInputType.Checkbox, undefined, true),
|
|
6919
|
-
new TraitConfig('autoplayDisableOnInteraction', 'Disable on interact', TraitInputType.Checkbox, undefined, false),
|
|
6920
|
-
// ── Section label ─────────────────────────────────
|
|
6921
|
-
new TraitConfig('__gridLabel', 'Grid options', TraitInputType.SectionLabel),
|
|
6922
|
-
// ── Grid sub-options ──────────────────────────────
|
|
6923
|
-
new TraitConfig('gridRows', 'Rows', TraitInputType.Number, undefined, 1),
|
|
6924
|
-
// ── Section label ─────────────────────────────────
|
|
6925
|
-
new TraitConfig('__responsiveLabel', 'Responsive breakpoints', TraitInputType.SectionLabel),
|
|
6926
|
-
// ── Responsive ────────────────────────────────────
|
|
7017
|
+
// ── Grid ──────────────────────────────────────────────────────────
|
|
7018
|
+
new TraitConfig('__gridLabel', 'Grid', TraitInputType.SectionLabel),
|
|
7019
|
+
new TraitConfig('enableGrid', 'Grid (multi-row)', TraitInputType.Checkbox, undefined, false),
|
|
7020
|
+
new TraitConfig('gridRows', 'Rows', TraitInputType.Scrub, undefined, 2, undefined, { trait: 'enableGrid', values: 'true' }),
|
|
7021
|
+
// ── Responsive ────────────────────────────────────────────────────
|
|
7022
|
+
new TraitConfig('__responsiveLabel', 'Responsive', TraitInputType.SectionLabel),
|
|
6927
7023
|
new TraitConfig('breakpoints', 'Breakpoints (JSON)', TraitInputType.Textarea, undefined, ''),
|
|
6928
7024
|
];
|
|
6929
7025
|
this.styleTraits = [
|