@vectoriox/iox-builder 1.4.84 → 1.4.86

package/fesm2022/vectoriox-iox-builder.mjs

@@ -5495,10 +5495,13 @@ class SliderContainerComponent {
         this.isPreview = !!isPreview;
     }
     ngOnInit() { }
+    ngAfterViewInit() {
+        this._initRafId = requestAnimationFrame(() => this._initSwiper());
+    }
     ngOnChanges(changes) {
-        if (!this.isPreview || !this._swiper)
+        if (!this._swiper)
             return;
-        const swiperKeys = new Set([
+        const previewKeys = new Set([
             'direction', 'loop', 'slidesPerView', 'slidesPerGroup', 'spaceBetween', 'speed',
             'effect', 'grabCursor', 'centeredSlides', 'initialSlide', 'autoHeight',
             'slideToClickedSlide', 'freeMode', 'breakpoints',
@@ -5509,27 +5512,30 @@ class SliderContainerComponent {
             'autoplayDelay', 'autoplayPauseOnMouseEnter', 'autoplayDisableOnInteraction',
             'gridRows',
         ]);
-        const hasConfigChange = Object.keys(changes).some(k => swiperKeys.has(k));
+        // Edit mode also reinits when children change (new slide added)
+        const editKeys = new Set([...previewKeys, 'children']);
+        const relevantKeys = this.isPreview ? previewKeys : editKeys;
+        const hasConfigChange = Object.keys(changes).some(k => relevantKeys.has(k));
         if (hasConfigChange) {
             this._destroySwiper();
             this.cdr.detectChanges();
             this._initRafId = requestAnimationFrame(() => this._initSwiper());
         }
     }
-    ngAfterViewInit() {
-        if (this.isPreview) {
-            this._initRafId = requestAnimationFrame(() => this._initSwiper());
-        }
-    }
     ngOnDestroy() {
         cancelAnimationFrame(this._initRafId);
         this._destroySwiper();
     }
     onDrop(event) {
         this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
+        // Sync Swiper's internal slide list after drag-drop reorder
+        if (this._swiper) {
+            requestAnimationFrame(() => this._swiper?.update());
+        }
     }
     async _initSwiper() {
-        if (!this.swiperEl?.nativeElement)
+        const el = this.isPreview ? this.swiperEl?.nativeElement : this.editSwiperEl?.nativeElement;
+        if (!el)
             return;
         const [{ default: Swiper }, swiperModules] = await Promise.all([
             import('swiper'),
@@ -5543,92 +5549,119 @@ class SliderContainerComponent {
             modules.push(Pagination);
         if (this.enableScrollbar)
             modules.push(Scrollbar);
-        if (this.enableAutoplay)
-            modules.push(Autoplay);
-        if (this.enableKeyboard)
-            modules.push(Keyboard);
-        if (this.enableMousewheel)
-            modules.push(Mousewheel);
-        if (this.enableZoom)
-            modules.push(Zoom);
-        if (this.enableGrid)
-            modules.push(Grid);
-        if (this.enableParallax)
-            modules.push(Parallax);
-        if (this.freeMode)
-            modules.push(FreeMode);
-        const effectMap = {
-            fade: EffectFade, cube: EffectCube, flip: EffectFlip,
-            coverflow: EffectCoverflow, cards: EffectCards, creative: EffectCreative,
-        };
-        if (this.effect !== 'slide' && effectMap[this.effect]) {
-            modules.push(effectMap[this.effect]);
-        }
         const config = {
             modules,
             direction: this.direction,
             slidesPerView: this.slidesPerView,
             slidesPerGroup: this.slidesPerGroup > 1 ? this.slidesPerGroup : 1,
             spaceBetween: this.spaceBetween,
-            speed: this.speed,
-            effect: this.effect,
-            grabCursor: this.grabCursor,
+            speed: this.isPreview ? this.speed : 300,
+            // Always slide effect in edit mode — fade/cube etc. hide all but active slide
+            effect: this.isPreview ? this.effect : 'slide',
             centeredSlides: this.centeredSlides,
             initialSlide: this.initialSlide,
             autoHeight: this.autoHeight,
-            slideToClickedSlide: this.slideToClickedSlide,
-            // loop / rewind mapping
-            loop: this.loop === 'loop',
-            rewind: this.loop === 'rewind',
         };
-        if (this.freeMode) {
-            config['freeMode'] = true;
-        }
-        if (this.enableNavigation) {
-            config['navigation'] = { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' };
-        }
-        if (this.enablePagination) {
-            config['pagination'] = {
-                el: '.swiper-pagination',
-                type: this.paginationType,
-                clickable: this.paginationClickable,
-                dynamicBullets: this.paginationDynamicBullets,
+        if (this.isPreview) {
+            // Full interactive config for preview
+            config['grabCursor'] = this.grabCursor;
+            config['slideToClickedSlide'] = this.slideToClickedSlide;
+            config['loop'] = this.loop === 'loop';
+            config['rewind'] = this.loop === 'rewind';
+            if (this.freeMode) {
+                modules.push(FreeMode);
+                config['freeMode'] = true;
+            }
+            if (this.enableAutoplay) {
+                modules.push(Autoplay);
+            }
+            if (this.enableKeyboard) {
+                modules.push(Keyboard);
+            }
+            if (this.enableMousewheel) {
+                modules.push(Mousewheel);
+            }
+            if (this.enableZoom) {
+                modules.push(Zoom);
+            }
+            if (this.enableGrid) {
+                modules.push(Grid);
+            }
+            if (this.enableParallax) {
+                modules.push(Parallax);
+            }
+            const effectMap = {
+                fade: EffectFade, cube: EffectCube, flip: EffectFlip,
+                coverflow: EffectCoverflow, cards: EffectCards, creative: EffectCreative,
             };
-        }
-        if (this.enableScrollbar) {
-            config['scrollbar'] = { el: '.swiper-scrollbar', draggable: true };
-        }
-        if (this.enableAutoplay) {
-            config['autoplay'] = {
-                delay: this.autoplayDelay,
-                pauseOnMouseEnter: this.autoplayPauseOnMouseEnter,
-                disableOnInteraction: this.autoplayDisableOnInteraction,
+            if (this.effect !== 'slide' && effectMap[this.effect]) {
+                modules.push(effectMap[this.effect]);
+            }
+            if (this.enableNavigation) {
+                config['navigation'] = { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' };
+            }
+            if (this.enablePagination) {
+                config['pagination'] = {
+                    el: '.swiper-pagination',
+                    type: this.paginationType,
+                    clickable: this.paginationClickable,
+                    dynamicBullets: this.paginationDynamicBullets,
+                };
+            }
+            if (this.enableScrollbar)
+                config['scrollbar'] = { el: '.swiper-scrollbar', draggable: true };
+            if (this.enableAutoplay) {
+                config['autoplay'] = {
+                    delay: this.autoplayDelay,
+                    pauseOnMouseEnter: this.autoplayPauseOnMouseEnter,
+                    disableOnInteraction: this.autoplayDisableOnInteraction,
+                };
+            }
+            if (this.enableGrid && this.gridRows > 1)
+                config['grid'] = { rows: this.gridRows };
+            if (this.breakpoints) {
+                try {
+                    config['breakpoints'] = JSON.parse(this.breakpoints);
+                }
+                catch { /* ignore */ }
+            }
+            config['on'] = {
+                slideChange: (swiper) => this._onSwiperEvent('swiperSlideChange', swiper),
+                reachBeginning: (swiper) => this._onSwiperEvent('swiperReachBeginning', swiper),
+                reachEnd: (swiper) => this._onSwiperEvent('swiperReachEnd', swiper),
+                autoplayStart: (swiper) => this._onSwiperEvent('swiperAutoplayStart', swiper),
+                autoplayStop: (swiper) => this._onSwiperEvent('swiperAutoplayStop', swiper),
             };
         }
-        if (this.enableGrid && this.gridRows > 1) {
-            config['grid'] = { rows: this.gridRows };
-        }
-        if (this.breakpoints) {
-            try {
-                config['breakpoints'] = JSON.parse(this.breakpoints);
+        else {
+            // Edit mode: disable touch/swipe so builder click handlers work normally
+            config['allowTouchMove'] = false;
+            config['simulateTouch'] = false;
+            if (this.enableNavigation) {
+                config['navigation'] = { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' };
             }
-            catch { /* ignore invalid JSON */ }
-        }
-        config['on'] = {
-            slideChange: (swiper) => this._onSwiperEvent('swiperSlideChange', swiper),
-            reachBeginning: (swiper) => this._onSwiperEvent('swiperReachBeginning', swiper),
-            reachEnd: (swiper) => this._onSwiperEvent('swiperReachEnd', swiper),
-            autoplayStart: (swiper) => this._onSwiperEvent('swiperAutoplayStart', swiper),
-            autoplayStop: (swiper) => this._onSwiperEvent('swiperAutoplayStop', swiper),
-        };
-        this._swiper = new Swiper(this.swiperEl.nativeElement, config);
-        this.instanceRegistry.register(this.nodeId, this._swiper);
+            if (this.enablePagination) {
+                config['pagination'] = {
+                    el: '.swiper-pagination',
+                    type: this.paginationType,
+                    clickable: this.paginationClickable,
+                    dynamicBullets: this.paginationDynamicBullets,
+                };
+            }
+            if (this.enableScrollbar)
+                config['scrollbar'] = { el: '.swiper-scrollbar', draggable: false };
+        }
+        this._swiper = new Swiper(el, config);
+        if (this.isPreview) {
+            this.instanceRegistry.register(this.nodeId, this._swiper);
+        }
     }
     _destroySwiper() {
         if (this._swiper) {
             this._swiper.destroy(true, true);
             this._swiper = null;
-            this.instanceRegistry.unregister(this.nodeId);
+            if (this.isPreview)
+                this.instanceRegistry.unregister(this.nodeId);
         }
     }
     _onSwiperEvent(eventName, swiper) {
@@ -5645,21 +5678,20 @@ class SliderContainerComponent {
         }
     }
     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 }); }
-    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: `
-        <!-- EDIT MODE: flat scrollable strip with drag-drop -->
+    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: `
+        <!-- EDIT MODE: real Swiper with touch disabled — shows actual layout for config feedback -->
         <div *ngIf="!isPreview"
-             class="slider-edit-root"
+             #editSwiperEl
+             class="swiper swiper-edit"
              [ngClass]="['iox-node-' + nodeId]"
              [ngStyle]="style"
              ioxDropzone
              [ioxDropzoneId]="dropListId"
              [ioxDropzoneData]="children"
              (ioxDrop)="onDrop($event)">
-
-            <div class="slider-edit-track"
-                 [class.slider-edit-track--vertical]="direction === 'vertical'">
+            <div class="swiper-wrapper">
                 <div *ngFor="let child of children"
-                     class="slider-edit-slide"
+                     class="swiper-slide"
                      [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
                      ioxDraggable
                      [ioxDragData]="child"
@@ -5671,15 +5703,20 @@ class SliderContainerComponent {
                         (onMouseLeave)="childMouseLeave.emit()">
                     </ng-container>
                 </div>
+            </div>
 
-                <div *ngIf="!children.length" class="slider-edit-placeholder">
-                    <i class="ph-thin ph-sliders-horizontal"></i>
-                    <span>Click + in toolbar to add a slide</span>
-                </div>
+            <div *ngIf="!children.length" class="slider-edit-placeholder">
+                <i class="ph-thin ph-sliders-horizontal"></i>
+                <span>Click + in toolbar to add a slide</span>
             </div>
+
+            <div *ngIf="enableNavigation" class="swiper-button-prev"></div>
+            <div *ngIf="enableNavigation" class="swiper-button-next"></div>
+            <div *ngIf="enablePagination" class="swiper-pagination"></div>
+            <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
 
-        <!-- PREVIEW MODE: real Swiper DOM structure -->
+        <!-- PREVIEW MODE: real Swiper with all interactions enabled -->
         <div *ngIf="isPreview"
              #swiperEl
              class="swiper"
@@ -5703,25 +5740,24 @@ class SliderContainerComponent {
             <div *ngIf="enablePagination" class="swiper-pagination"></div>
             <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
-    `, 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"] }] }); }
+    `, isInline: true, styles: [":host{display:block}.swiper{width:100%;height:100%;box-sizing:border-box}.swiper-edit,.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-slider-container', template: `
-        <!-- EDIT MODE: flat scrollable strip with drag-drop -->
+        <!-- EDIT MODE: real Swiper with touch disabled — shows actual layout for config feedback -->
         <div *ngIf="!isPreview"
-             class="slider-edit-root"
+             #editSwiperEl
+             class="swiper swiper-edit"
              [ngClass]="['iox-node-' + nodeId]"
              [ngStyle]="style"
              ioxDropzone
              [ioxDropzoneId]="dropListId"
              [ioxDropzoneData]="children"
              (ioxDrop)="onDrop($event)">
-
-            <div class="slider-edit-track"
-                 [class.slider-edit-track--vertical]="direction === 'vertical'">
+            <div class="swiper-wrapper">
                 <div *ngFor="let child of children"
-                     class="slider-edit-slide"
+                     class="swiper-slide"
                      [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
                      ioxDraggable
                      [ioxDragData]="child"
@@ -5733,15 +5769,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         (onMouseLeave)="childMouseLeave.emit()">
                     </ng-container>
                 </div>
+            </div>
 
-                <div *ngIf="!children.length" class="slider-edit-placeholder">
-                    <i class="ph-thin ph-sliders-horizontal"></i>
-                    <span>Click + in toolbar to add a slide</span>
-                </div>
+            <div *ngIf="!children.length" class="slider-edit-placeholder">
+                <i class="ph-thin ph-sliders-horizontal"></i>
+                <span>Click + in toolbar to add a slide</span>
             </div>
+
+            <div *ngIf="enableNavigation" class="swiper-button-prev"></div>
+            <div *ngIf="enableNavigation" class="swiper-button-next"></div>
+            <div *ngIf="enablePagination" class="swiper-pagination"></div>
+            <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
 
-        <!-- PREVIEW MODE: real Swiper DOM structure -->
+        <!-- PREVIEW MODE: real Swiper with all interactions enabled -->
         <div *ngIf="isPreview"
              #swiperEl
              class="swiper"
@@ -5765,7 +5806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             <div *ngIf="enablePagination" class="swiper-pagination"></div>
             <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
-    `, 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"] }]
+    `, standalone: false, styles: [":host{display:block}.swiper{width:100%;height:100%;box-sizing:border-box}.swiper-edit,.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"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -5854,6 +5895,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }], swiperEl: [{
                 type: ViewChild,
                 args: ['swiperEl', { static: false }]
+            }], editSwiperEl: [{
+                type: ViewChild,
+                args: ['editSwiperEl', { static: false }]
             }] } });
 
 class SliderSlideComponent {