@vectoriox/iox-builder 1.4.79 → 1.4.81

package/fesm2022/vectoriox-iox-builder.mjs

@@ -4387,6 +4387,21 @@ class BuilderComponent {
                 this.panelEventService.emit(PanelEventTypes.LAYOUT_CHANGED, this.layout);
                 break;
             }
+            case ToolbarAction.AddSlide: {
+                if (!Array.isArray(node.children))
+                    break;
+                const slide = this.registry.createConfig('SliderSlide');
+                if (!slide)
+                    break;
+                node.children = [...node.children, slide];
+                const ref = this.overlayService.getNodeRef(node);
+                if (ref?.componentRef) {
+                    ref.componentRef.setInput('children', node.children);
+                    ref.componentRef.changeDetectorRef.detectChanges();
+                }
+                this.panelEventService.emit(PanelEventTypes.LAYOUT_CHANGED, this.layout);
+                break;
+            }
         }
     }
     confirmSaveBlock() {
@@ -5431,7 +5446,7 @@ class SliderContainerComponent {
         // Swiper core config
         this.direction = 'horizontal';
         this.loop = false;
-        this.slidesPerView = 1;
+        this.slidesPerView = 'auto';
         this.spaceBetween = 0;
         this.speed = 300;
         this.effect = 'slide';
@@ -5867,7 +5882,7 @@ class SliderSlideComponent {
                 </ng-container>
             </div>
         </div>
-    `, isInline: true, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;min-height:200px}.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"] }] }); }
+    `, 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderSlideComponent, decorators: [{
             type: Component,
@@ -5929,7 +5944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 </ng-container>
             </div>
         </div>
-    `, standalone: false, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;min-height:200px}.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"] }]
+    `, 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"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -6792,10 +6807,41 @@ class SectionComponentConfig extends ComponentConfig {
     }
 }
 
+class SliderSlideConfig extends ComponentConfig {
+    constructor() {
+        super('SliderSlide', 'app-slider-slide', 'ph-thin ph-rectangle', 'Media');
+        this.children = [];
+        // Hidden: SliderSlide is created only via the "Add Slide" toolbar button,
+        // not by dragging from the Components panel.
+        this.hidden = true;
+        this.componentEvents = [
+            { value: 'swiperSlideActive', label: 'This Slide Becomes Active', icon: 'ph-thin ph-eye' },
+            { value: 'swiperSlideInactive', label: 'This Slide Becomes Inactive', icon: 'ph-thin ph-eye-slash' },
+        ];
+        this.traits = [];
+        this.styleTraits = [
+            new PositionGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+        ];
+        this.applyStyleDefaults({
+            width: '33%',
+            aspectRatio: '1 / 1',
+        });
+    }
+}
+
 class SliderContainerConfig extends ComponentConfig {
     constructor() {
         super('SliderContainer', 'app-slider-container', 'ph-thin ph-slideshow', 'Media');
-        this.children = [];
+        this.children = [
+            new SliderSlideConfig(),
+            new SliderSlideConfig(),
+            new SliderSlideConfig(),
+            new SliderSlideConfig(),
+        ];
         this.componentEvents = [
             { value: 'swiperSlideChange', label: 'Slide Changes', icon: 'ph-thin ph-arrows-left-right' },
             { value: 'swiperReachBeginning', label: 'Reaches First Slide', icon: 'ph-thin ph-skip-back' },
@@ -6823,7 +6869,15 @@ class SliderContainerConfig extends ComponentConfig {
                 { label: 'Cards', value: 'cards' },
                 { label: 'Creative', value: 'creative' },
             ], 'slide'),
-            new TraitConfig('slidesPerView', 'Slides per view', TraitInputType.Number, undefined, 1),
+            new TraitConfig('slidesPerView', 'Slides per view', TraitInputType.Select, [
+                { label: 'Auto (use slide width)', value: 'auto' },
+                { label: '1', value: 1 },
+                { label: '2', value: 2 },
+                { label: '3', value: 3 },
+                { label: '4', value: 4 },
+                { label: '5', value: 5 },
+                { label: '6', value: 6 },
+            ], 'auto'),
             new TraitConfig('spaceBetween', 'Space between (px)', TraitInputType.Number, undefined, 0),
             new TraitConfig('speed', 'Transition speed (ms)', TraitInputType.Number, undefined, 300),
             new TraitConfig('initialSlide', 'Initial slide', TraitInputType.Number, undefined, 0),
@@ -6865,6 +6919,7 @@ class SliderContainerConfig extends ComponentConfig {
         this.styleTraits = [
             new PositionGroupStyleConfig(),
             new SizeGroupStyleConfig(),
+            new LayoutGroupStyleConfig(),
             new SpacingGroupStyleConfig(),
             new BorderGroupStyleConfig(),
             new BackgroundGroupStyleConfig(),
@@ -6877,32 +6932,6 @@ class SliderContainerConfig extends ComponentConfig {
     }
 }
 
-class SliderSlideConfig extends ComponentConfig {
-    constructor() {
-        super('SliderSlide', 'app-slider-slide', 'ph-thin ph-rectangle', 'Media');
-        this.children = [];
-        // Hidden: SliderSlide is created only via the "Add Slide" toolbar button,
-        // not by dragging from the Components panel.
-        this.hidden = true;
-        this.componentEvents = [
-            { value: 'swiperSlideActive', label: 'This Slide Becomes Active', icon: 'ph-thin ph-eye' },
-            { value: 'swiperSlideInactive', label: 'This Slide Becomes Inactive', icon: 'ph-thin ph-eye-slash' },
-        ];
-        this.traits = [];
-        this.styleTraits = [
-            new PositionGroupStyleConfig(),
-            new SizeGroupStyleConfig(),
-            new SpacingGroupStyleConfig(),
-            new BorderGroupStyleConfig(),
-            new BackgroundGroupStyleConfig(),
-        ];
-        this.applyStyleDefaults({
-            width: '100%',
-            height: '100%',
-        });
-    }
-}
-
 class BuilderSpacerComponentConfig extends ComponentConfig {
     constructor() {
         super('Spacer', 'app-builder-spacer', 'ph-thin ph-arrows-vertical', 'Layout');