@mintplayer/ng-swiper 20.3.0 → 21.1.0

package/fesm2022/mintplayer-ng-swiper-swiper.mjs

@@ -1,212 +1,226 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, forwardRef, ContentChildren, HostBinding, Inject, Directive, input, HostListener, NgModule } from '@angular/core';
-import * as i2 from '@mintplayer/ng-swiper/observe-size';
+import { inject, ElementRef, input, model, output, signal, computed, effect, forwardRef, ContentChildren, HostBinding, Directive, HostListener, NgModule } from '@angular/core';
+import * as i1 from '@mintplayer/ng-swiper/observe-size';
 import { BsObserveSizeDirective } from '@mintplayer/ng-swiper/observe-size';
-import { combineLatest, map, delay, filter, mergeMap, shareReplay, debounceTime, distinctUntilChanged, BehaviorSubject, take } from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i1 from '@angular/animations';
-import { style, animate } from '@angular/animations';
+import { DOCUMENT } from '@angular/common';
+import { AnimationBuilder, style, animate } from '@angular/animations';
 
 class BsSwipeContainerDirective {
-    animationBuilder;
-    destroy;
-    observeSize;
-    constructor(element, animationBuilder, destroy, document, observeSize) {
-        this.animationBuilder = animationBuilder;
-        this.destroy = destroy;
-        this.observeSize = observeSize;
-        this.containerElement = element;
-        this.document = document;
-        this.offset$ = combineLatest([
-            this.startTouch$,
-            this.lastTouch$,
-            this.imageIndex$,
-            this.isViewInited$,
-            this.orientation$,
-            this.observeSize.size$,
-        ])
-            .pipe(map(([startTouch, lastTouch, imageIndex, isViewInited, orientation, containerSize]) => {
-            if (!isViewInited) {
+    animationBuilder = inject(AnimationBuilder);
+    observeSize = inject(BsObserveSizeDirective);
+    containerElement = inject((ElementRef));
+    document = inject(DOCUMENT);
+    offsetLeft = null;
+    offsetRight = null;
+    offsetTopPx = null;
+    offsetBottomPx = null;
+    set swipes(value) {
+        setTimeout(() => this._swipes.set(value));
+    }
+    minimumOffset = input(50, ...(ngDevMode ? [{ debugName: "minimumOffset" }] : []));
+    animation = input('slide', ...(ngDevMode ? [{ debugName: "animation" }] : []));
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    imageIndex = model(0, ...(ngDevMode ? [{ debugName: "imageIndex" }] : []));
+    animationStart = output();
+    animationEnd = output();
+    isViewInited = signal(false, ...(ngDevMode ? [{ debugName: "isViewInited" }] : []));
+    isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
+    startTouch = signal(null, ...(ngDevMode ? [{ debugName: "startTouch" }] : []));
+    lastTouch = signal(null, ...(ngDevMode ? [{ debugName: "lastTouch" }] : []));
+    _swipes = signal(null, ...(ngDevMode ? [{ debugName: "_swipes" }] : []));
+    pendingAnimation;
+    // Computed signals for derived state
+    offset = computed(() => {
+        const startTouch = this.startTouch();
+        const lastTouch = this.lastTouch();
+        const imageIndex = this.imageIndex();
+        const isViewInited = this.isViewInited();
+        const orientation = this.orientation();
+        const containerSize = this.observeSize.size();
+        const maxSlideHeight = this.maxSlideHeight();
+        if (!isViewInited) {
+            return (-imageIndex * 100);
+        }
+        else if (!!startTouch && !!lastTouch) {
+            // For horizontal: use container width
+            // For vertical: use maxSlideHeight (single slide height, not total container height)
+            const containerLength = orientation === 'horizontal'
+                ? (containerSize?.width ?? this.containerElement.nativeElement.clientWidth)
+                : maxSlideHeight;
+            if (containerLength === 0) {
                 return (-imageIndex * 100);
             }
-            else if (!!startTouch && !!lastTouch) {
-                const containerLength = orientation === 'horizontal'
-                    ? (containerSize?.width ?? this.containerElement.nativeElement.clientWidth)
-                    : (containerSize?.height ?? this.containerElement.nativeElement.clientHeight);
-                if (containerLength === 0) {
-                    return (-imageIndex * 100);
-                }
-                const delta = orientation === 'horizontal'
-                    ? (lastTouch.position.x - startTouch.position.x)
-                    : (lastTouch.position.y - startTouch.position.y);
-                return (-imageIndex * 100 + (delta / containerLength) * 100);
+            const delta = orientation === 'horizontal'
+                ? (lastTouch.position.x - startTouch.position.x)
+                : (lastTouch.position.y - startTouch.position.y);
+            return (-imageIndex * 100 + (delta / containerLength) * 100);
+        }
+        else {
+            return (-imageIndex * 100);
+        }
+    }, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    padLeft = computed(() => {
+        const swipes = this._swipes();
+        if (!swipes)
+            return 0;
+        let count = 0;
+        for (const s of swipes) {
+            if (!s.offside()) {
+                break;
             }
             else {
-                return (-imageIndex * 100);
+                count++;
             }
-        }));
-        this.padLeft$ = this.swipes$.pipe(map(swipes => {
-            if (!swipes) {
-                return 0;
-            }
-            let count = 0;
-            for (const s of swipes) {
-                if (!s.offside()) {
-                    break;
-                }
-                else {
-                    count++;
-                }
+        }
+        return count;
+    }, ...(ngDevMode ? [{ debugName: "padLeft" }] : []));
+    padRight = computed(() => {
+        const swipes = this._swipes();
+        if (!swipes)
+            return 0;
+        let count = 0;
+        for (const s of swipes.toArray().reverse()) {
+            if (!s.offside()) {
+                break;
             }
-            return count;
-        }));
-        this.padRight$ = this.swipes$.pipe(map(swipes => {
-            if (!swipes) {
-                return 0;
+            else {
+                count++;
             }
-            let count = 0;
-            for (const s of swipes.toArray().reverse()) {
-                if (!s.offside()) {
-                    break;
-                }
-                else {
-                    count++;
-                }
+        }
+        return count;
+    }, ...(ngDevMode ? [{ debugName: "padRight" }] : []));
+    offsetPrimary = computed(() => this.offset() - this.padLeft() * 100, ...(ngDevMode ? [{ debugName: "offsetPrimary" }] : []));
+    offsetSecondary = computed(() => -(this.offset() - this.padLeft() * 100) - (this.padRight() - 1) * 100, ...(ngDevMode ? [{ debugName: "offsetSecondary" }] : []));
+    actualSwipes = computed(() => {
+        const swipes = this._swipes();
+        if (swipes) {
+            return swipes.filter(swipe => !swipe.offside());
+        }
+        else {
+            return [];
+        }
+    }, ...(ngDevMode ? [{ debugName: "actualSwipes" }] : []));
+    // Computed signal that reactively tracks all swipe sizes
+    slideSizes = computed(() => {
+        const actualSwipes = this.actualSwipes();
+        if (!actualSwipes || actualSwipes.length === 0) {
+            return [];
+        }
+        // Reading each swipe's size() creates reactive dependencies
+        return actualSwipes.map(swipe => swipe.observeSize.size());
+    }, ...(ngDevMode ? [{ debugName: "slideSizes" }] : []));
+    maxSlideHeight = computed(() => {
+        const slideSizes = this.slideSizes();
+        const heights = slideSizes.map(s => s?.height ?? 1);
+        return heights.length ? Math.max(...heights) : 1;
+    }, ...(ngDevMode ? [{ debugName: "maxSlideHeight" }] : []));
+    currentSlideHeight = computed(() => {
+        const slideSizes = this.slideSizes();
+        const imageIndex = this.imageIndex();
+        const orientation = this.orientation();
+        const heights = slideSizes.map(s => s?.height ?? 0);
+        const maxHeight = heights.length ? Math.max(...heights) : 0;
+        const currHeight = slideSizes[imageIndex]?.height ?? maxHeight;
+        const result = (orientation === 'vertical') ? maxHeight : currHeight;
+        // Return null if measurements aren't valid yet to avoid collapsing the carousel
+        return result > 10 ? result : null;
+    }, ...(ngDevMode ? [{ debugName: "currentSlideHeight" }] : []));
+    constructor() {
+        // Effect to update offsetLeft/offsetTopPx based on offsetPrimary and orientation
+        effect(() => {
+            const offsetPrimary = this.offsetPrimary();
+            const orientation = this.orientation();
+            const maxSlideHeight = this.maxSlideHeight();
+            const isAnimating = this.isAnimating();
+            // Skip updating offsets during animation to avoid interfering with CSS animation
+            if (isAnimating) {
+                return;
             }
-            return count;
-        }));
-        this.offsetPrimary$ = combineLatest([this.offset$, this.padLeft$])
-            .pipe(map(([offset, padLeft]) => offset - padLeft * 100));
-        this.offsetSecondary$ = combineLatest([this.offset$, this.padLeft$, this.padRight$])
-            .pipe(map(([offset, padLeft, padRight]) => -(offset - padLeft * 100) - (padRight - 1) * 100));
-        combineLatest([this.offsetPrimary$, this.orientation$])
-            .pipe(takeUntilDestroyed())
-            .subscribe(([offsetPrimary, orientation]) => {
             if (orientation === 'horizontal') {
                 this.offsetLeft = offsetPrimary;
-                this.offsetTop = null;
+                this.offsetTopPx = null;
             }
             else {
-                this.offsetTop = offsetPrimary;
+                // For vertical mode, convert percentage to pixels using slide height
+                // offsetPrimary is in percentage units (e.g., -100 means -100%)
+                // We need to convert to pixels based on actual slide height
+                this.offsetTopPx = (offsetPrimary / 100) * maxSlideHeight;
                 this.offsetLeft = null;
             }
         });
-        combineLatest([this.offsetSecondary$, this.orientation$])
-            .pipe(takeUntilDestroyed())
-            .subscribe(([offsetSecondary, orientation]) => {
+        // Effect to update offsetRight/offsetBottomPx based on offsetSecondary and orientation
+        effect(() => {
+            const offsetSecondary = this.offsetSecondary();
+            const orientation = this.orientation();
+            const maxSlideHeight = this.maxSlideHeight();
+            const isAnimating = this.isAnimating();
+            // Skip updating offsets during animation to avoid interfering with CSS animation
+            if (isAnimating) {
+                return;
+            }
             if (orientation === 'horizontal') {
                 this.offsetRight = offsetSecondary;
-                this.offsetBottom = null;
+                this.offsetBottomPx = null;
             }
             else {
-                this.offsetBottom = offsetSecondary;
+                // For vertical mode, convert percentage to pixels using slide height
+                this.offsetBottomPx = (offsetSecondary / 100) * maxSlideHeight;
                 this.offsetRight = null;
             }
         });
-        this.imageIndex$.pipe(takeUntilDestroyed())
-            .subscribe(imageIndex => this.imageIndexChange.emit(imageIndex));
-        this.actualSwipes$ = this.swipes$
-            .pipe(map(swipes => {
-            if (swipes) {
-                return swipes.filter(swipe => !swipe.offside());
-            }
-            else {
-                return [];
-            }
-        }));
-        this.slideSizes$ = this.actualSwipes$
-            .pipe(delay(400), filter(swipes => !!swipes))
-            .pipe(mergeMap(swipes => combineLatest(swipes.map(swipe => swipe.observeSize.size$))))
-            .pipe(shareReplay({ bufferSize: 1, refCount: true }));
-        this.maxSlideHeight$ = this.slideSizes$
-            .pipe(map(slideSizes => {
-            const heights = slideSizes.map(s => s?.height ?? 1);
-            return heights.length ? Math.max(...heights) : 1;
-        }))
-            .pipe(shareReplay({ bufferSize: 1, refCount: true }));
-        this.currentSlideHeight$ = combineLatest([this.slideSizes$, this.imageIndex$, this.orientation$])
-            .pipe(map(([slideSizes, imageIndex, orientation]) => {
-            const heights = slideSizes.map(s => s?.height ?? 1);
-            const maxHeight = heights.length ? Math.max(...heights) : 1;
-            const currHeight = slideSizes[imageIndex]?.height ?? maxHeight;
-            return (orientation === 'vertical') ? maxHeight : currHeight;
-        }))
-            .pipe(shareReplay({ bufferSize: 1, refCount: true }))
-            .pipe(debounceTime(10));
-        this.orientation$
-            .pipe(distinctUntilChanged(), takeUntilDestroyed())
-            .subscribe(() => {
-            this.offsetLeft = null;
-            this.offsetRight = null;
-            this.offsetTop = null;
-            this.offsetBottom = null;
-        });
-    }
-    offsetLeft = null;
-    offsetRight = null;
-    offsetTop = null;
-    offsetBottom = null;
-    set swipes(value) {
-        setTimeout(() => this.swipes$.next(value));
-    }
-    minimumOffset = 50;
-    get orientation() {
-        return this.orientation$.value;
-    }
-    set orientation(value) {
-        this.orientation$.next(value ?? 'horizontal');
     }
-    //#region ImageIndex
-    get imageIndex() {
-        return this.imageIndex$.value;
-    }
-    set imageIndex(value) {
-        this.imageIndex$.next(value);
-    }
-    imageIndexChange = new EventEmitter();
-    //#endregion
-    actualSwipes$;
-    isViewInited$ = new BehaviorSubject(false);
-    startTouch$ = new BehaviorSubject(null);
-    lastTouch$ = new BehaviorSubject(null);
-    swipes$ = new BehaviorSubject(null);
-    // TODO: slide sizes instead
-    slideSizes$;
-    maxSlideHeight$;
-    imageIndex$ = new BehaviorSubject(0);
-    currentSlideHeight$;
-    pendingAnimation;
-    containerElement;
-    document;
-    // TODO: Don't just keep px, but both px and % using currentslidesize$
-    offset$;
-    offsetPrimary$;
-    offsetSecondary$;
-    padLeft$;
-    padRight$;
-    orientation$ = new BehaviorSubject('horizontal');
     ngAfterViewInit() {
-        this.isViewInited$.next(true);
+        this.isViewInited.set(true);
     }
     animateToIndexByDx(distance) {
-        combineLatest([this.imageIndex$, this.actualSwipes$])
-            .pipe(take(1), takeUntilDestroyed(this.destroy))
-            .subscribe(([imageIndex, actualSwipes]) => {
-            let newIndex;
-            if (Math.abs(distance) < this.minimumOffset) {
-                newIndex = imageIndex;
-            }
-            else {
-                newIndex = imageIndex + (distance < 0 ? 1 : -1);
-            }
-            this.animateToIndex(imageIndex, newIndex, distance, actualSwipes?.length ?? 1);
-        });
+        const imageIndex = this.imageIndex();
+        const actualSwipes = this.actualSwipes();
+        let newIndex;
+        if (Math.abs(distance) < this.minimumOffset()) {
+            newIndex = imageIndex;
+        }
+        else {
+            newIndex = imageIndex + (distance < 0 ? 1 : -1);
+        }
+        this.animateToIndex(imageIndex, newIndex, distance, actualSwipes?.length ?? 1);
     }
     animateToIndex(oldIndex, newIndex, distance, totalSlides) {
-        const orientation = this.orientation$.value;
+        const animation = this.animation();
+        const orientation = this.orientation();
         const containerElement = this.containerElement.nativeElement;
-        const containerLength = orientation === 'horizontal' ? containerElement.clientWidth : containerElement.clientHeight;
+        const maxSlideHeight = this.maxSlideHeight();
+        // For vertical mode, use maxSlideHeight instead of container height
+        const containerLength = orientation === 'horizontal'
+            ? containerElement.clientWidth
+            : maxSlideHeight;
+        this.animationStart.emit();
+        // Handle 'none' animation mode - instant transition
+        if (animation === 'none') {
+            // Correct the image index immediately
+            if (newIndex === -1) {
+                this.imageIndex.set(totalSlides - 1);
+            }
+            else if (newIndex === totalSlides) {
+                this.imageIndex.set(0);
+            }
+            else {
+                this.imageIndex.set(newIndex);
+            }
+            this.startTouch.set(null);
+            this.lastTouch.set(null);
+            this.animationEnd.emit();
+            return;
+        }
+        // Set animating flag and clear host bindings so animation has full control
+        this.isAnimating.set(true);
+        if (orientation === 'horizontal') {
+            this.offsetLeft = null;
+            this.offsetRight = null;
+        }
+        else {
+            this.offsetTopPx = null;
+            this.offsetBottomPx = null;
+        }
         if (orientation === 'horizontal') {
             this.pendingAnimation = this.animationBuilder.build([
                 style({
@@ -234,18 +248,21 @@ class BsSwipeContainerDirective {
         this.pendingAnimation.onDone(() => {
             // Correct the image index
             if (newIndex === -1) {
-                this.imageIndex$.next(totalSlides - 1);
+                this.imageIndex.set(totalSlides - 1);
             }
             else if (newIndex === totalSlides) {
-                this.imageIndex$.next(0);
+                this.imageIndex.set(0);
             }
             else {
-                this.imageIndex$.next(newIndex);
+                this.imageIndex.set(newIndex);
             }
-            this.startTouch$.next(null);
-            this.lastTouch$.next(null);
+            this.startTouch.set(null);
+            this.lastTouch.set(null);
             this.pendingAnimation?.destroy();
             this.pendingAnimation = undefined;
+            // Clear animating flag so effects can update offsets again
+            this.isAnimating.set(false);
+            this.animationEnd.emit();
         });
         this.pendingAnimation.play();
     }
@@ -264,76 +281,58 @@ class BsSwipeContainerDirective {
     gotoAnimate(index, type) {
         this.pendingAnimation?.finish();
         setTimeout(() => {
-            combineLatest([this.actualSwipes$, this.imageIndex$])
-                .pipe(take(1), takeUntilDestroyed(this.destroy))
-                .subscribe(([actualSwipes, imageIndex]) => {
-                this.pendingAnimation?.finish();
-                const idx = (type === 'relative') ? imageIndex + index : index;
-                this.animateToIndex(imageIndex, idx, 0, actualSwipes?.length ?? 1);
-            });
+            this.pendingAnimation?.finish();
+            const actualSwipes = this.actualSwipes();
+            const imageIndex = this.imageIndex();
+            const idx = (type === 'relative') ? imageIndex + index : index;
+            this.animateToIndex(imageIndex, idx, 0, actualSwipes?.length ?? 1);
         }, 20);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsSwipeContainerDirective, deps: [{ token: i0.ElementRef }, { token: i1.AnimationBuilder }, { token: i0.DestroyRef }, { token: DOCUMENT }, { token: i2.BsObserveSizeDirective }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: BsSwipeContainerDirective, isStandalone: false, selector: "[bsSwipeContainer]", inputs: { minimumOffset: "minimumOffset", orientation: "orientation", imageIndex: "imageIndex" }, outputs: { imageIndexChange: "imageIndexChange" }, host: { properties: { "style.margin-left.%": "this.offsetLeft", "style.margin-right.%": "this.offsetRight", "style.margin-top.%": "this.offsetTop", "style.margin-bottom.%": "this.offsetBottom" } }, queries: [{ propertyName: "swipes", predicate: i0.forwardRef(() => BsSwipeDirective) }], exportAs: ["bsSwipeContainer"], hostDirectives: [{ directive: i2.BsObserveSizeDirective }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSwipeContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: BsSwipeContainerDirective, isStandalone: true, selector: "[bsSwipeContainer]", inputs: { minimumOffset: { classPropertyName: "minimumOffset", publicName: "minimumOffset", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, imageIndex: { classPropertyName: "imageIndex", publicName: "imageIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageIndex: "imageIndexChange", animationStart: "animationStart", animationEnd: "animationEnd" }, host: { properties: { "style.margin-left.%": "this.offsetLeft", "style.margin-right.%": "this.offsetRight", "style.margin-top.px": "this.offsetTopPx", "style.margin-bottom.px": "this.offsetBottomPx" } }, queries: [{ propertyName: "swipes", predicate: i0.forwardRef(() => BsSwipeDirective) }], exportAs: ["bsSwipeContainer"], hostDirectives: [{ directive: i1.BsObserveSizeDirective }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsSwipeContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSwipeContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bsSwipeContainer]',
                     exportAs: 'bsSwipeContainer',
-                    standalone: false,
+                    standalone: true,
                     hostDirectives: [BsObserveSizeDirective],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.AnimationBuilder }, { type: i0.DestroyRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i2.BsObserveSizeDirective }], propDecorators: { offsetLeft: [{
+        }], ctorParameters: () => [], propDecorators: { offsetLeft: [{
                 type: HostBinding,
                 args: ['style.margin-left.%']
             }], offsetRight: [{
                 type: HostBinding,
                 args: ['style.margin-right.%']
-            }], offsetTop: [{
+            }], offsetTopPx: [{
                 type: HostBinding,
-                args: ['style.margin-top.%']
-            }], offsetBottom: [{
+                args: ['style.margin-top.px']
+            }], offsetBottomPx: [{
                 type: HostBinding,
-                args: ['style.margin-bottom.%']
+                args: ['style.margin-bottom.px']
             }], swipes: [{
                 type: ContentChildren,
                 args: [forwardRef(() => BsSwipeDirective)]
-            }], minimumOffset: [{
-                type: Input
-            }], orientation: [{
-                type: Input
-            }], imageIndex: [{
-                type: Input
-            }], imageIndexChange: [{
-                type: Output
-            }] } });
+            }], minimumOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumOffset", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], imageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageIndex", required: false }] }, { type: i0.Output, args: ["imageIndexChange"] }], animationStart: [{ type: i0.Output, args: ["animationStart"] }], animationEnd: [{ type: i0.Output, args: ["animationEnd"] }] } });
 
 class BsSwipeDirective {
-    container;
-    destroy;
-    constructor(container, observeSize, destroy) {
-        this.container = container;
-        this.destroy = destroy;
-        this.observeSize = observeSize;
-        this.container.orientation$
-            .pipe(takeUntilDestroyed())
-            .subscribe(orientation => {
-            this.inlineBlock = (orientation === 'horizontal');
-            this.block = (orientation === 'vertical');
-        });
-        combineLatest([this.container.maxSlideHeight$, this.container.orientation$])
-            .pipe(takeUntilDestroyed())
-            .subscribe(([maxHeight, orientation]) => {
-            const targetHeight = (orientation === 'vertical') ? maxHeight : null;
-            this.slideHeight = (targetHeight && targetHeight > 0) ? targetHeight : null;
-        });
-    }
-    observeSize;
+    container = inject(BsSwipeContainerDirective);
+    observeSize = inject(BsObserveSizeDirective);
     offside = input(false, ...(ngDevMode ? [{ debugName: "offside" }] : []));
+    orientationEffect = effect(() => {
+        const orientation = this.container.orientation();
+        this.inlineBlock = (orientation === 'horizontal');
+        this.block = (orientation === 'vertical');
+    }, ...(ngDevMode ? [{ debugName: "orientationEffect" }] : []));
+    heightEffect = effect(() => {
+        const maxHeight = this.container.maxSlideHeight();
+        const orientation = this.container.orientation();
+        // Only set height when we have valid measurements (> 10px threshold)
+        // to avoid circular dependency during initial load
+        const targetHeight = (orientation === 'vertical' && maxHeight > 10) ? maxHeight : null;
+        this.slideHeight = targetHeight;
+    }, ...(ngDevMode ? [{ debugName: "heightEffect" }] : []));
     classes = true;
     inlineBlock = true;
     block = false;
@@ -341,16 +340,17 @@ class BsSwipeDirective {
     onTouchStart(ev) {
         if (ev.touches.length === 1) {
             ev.preventDefault();
+            ev.stopPropagation();
             this.container.pendingAnimation?.finish();
             setTimeout(() => {
-                this.container.startTouch$.next({
+                this.container.startTouch.set({
                     position: {
                         x: ev.touches[0].clientX,
                         y: ev.touches[0].clientY,
                     },
                     timestamp: Date.now(),
                 });
-                this.container.lastTouch$.next({
+                this.container.lastTouch.set({
                     position: {
                         x: ev.touches[0].clientX,
                         y: ev.touches[0].clientY,
@@ -361,7 +361,9 @@ class BsSwipeDirective {
         }
     }
     onTouchMove(ev) {
-        this.container.lastTouch$.next({
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.container.lastTouch.set({
             position: {
                 x: ev.touches[0].clientX,
                 y: ev.touches[0].clientY,
@@ -370,29 +372,28 @@ class BsSwipeDirective {
         });
     }
     onTouchEnd(ev) {
-        combineLatest([this.container.startTouch$, this.container.lastTouch$, this.container.orientation$])
-            .pipe(filter(([startTouch, lastTouch]) => !!startTouch && !!lastTouch))
-            .pipe(take(1), takeUntilDestroyed(this.destroy))
-            .subscribe(([startTouch, lastTouch, orientation]) => {
-            if (!!startTouch && !!lastTouch) {
-                const distance = (orientation === 'horizontal')
-                    ? lastTouch.position.x - startTouch.position.x
-                    : lastTouch.position.y - startTouch.position.y;
-                this.container.onSwipe(distance);
-            }
-        });
+        ev.stopPropagation();
+        const startTouch = this.container.startTouch();
+        const lastTouch = this.container.lastTouch();
+        const orientation = this.container.orientation();
+        if (!!startTouch && !!lastTouch) {
+            const distance = (orientation === 'horizontal')
+                ? lastTouch.position.x - startTouch.position.x
+                : lastTouch.position.y - startTouch.position.y;
+            this.container.onSwipe(distance);
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsSwipeDirective, deps: [{ token: BsSwipeContainerDirective }, { token: i2.BsObserveSizeDirective }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: BsSwipeDirective, isStandalone: false, selector: "[bsSwipe]", inputs: { offside: { classPropertyName: "offside", publicName: "offside", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "touchstart": "onTouchStart($event)", "touchmove": "onTouchMove($event)", "touchend": "onTouchEnd($event)" }, properties: { "class.align-top": "this.classes", "class.float-none": "this.classes", "class.w-100": "this.classes", "class.pe-auto": "this.classes", "class.me-0": "this.classes", "class.d-inline-block": "this.inlineBlock", "class.d-block": "this.block", "style.height.px": "this.slideHeight" } }, hostDirectives: [{ directive: i2.BsObserveSizeDirective }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSwipeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: BsSwipeDirective, isStandalone: true, selector: "[bsSwipe]", inputs: { offside: { classPropertyName: "offside", publicName: "offside", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "touchstart": "onTouchStart($event)", "touchmove": "onTouchMove($event)", "touchend": "onTouchEnd($event)" }, properties: { "class.align-top": "this.classes", "class.float-none": "this.classes", "class.w-100": "this.classes", "class.pe-auto": "this.classes", "class.me-0": "this.classes", "class.d-inline-block": "this.inlineBlock", "class.d-block": "this.block", "style.height.px": "this.slideHeight" } }, hostDirectives: [{ directive: i1.BsObserveSizeDirective }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsSwipeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSwipeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bsSwipe]',
                     hostDirectives: [BsObserveSizeDirective],
-                    standalone: false,
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: BsSwipeContainerDirective }, { type: i2.BsObserveSizeDirective }, { type: i0.DestroyRef }], propDecorators: { classes: [{
+        }], propDecorators: { offside: [{ type: i0.Input, args: [{ isSignal: true, alias: "offside", required: false }] }], classes: [{
                 type: HostBinding,
                 args: ['class.align-top']
             }, {
@@ -428,15 +429,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             }] } });
 
 class BsSwiperModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsSwiperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: BsSwiperModule, declarations: [BsSwipeDirective, BsSwipeContainerDirective], imports: [CommonModule], exports: [BsSwipeDirective, BsSwipeContainerDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsSwiperModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSwiperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: BsSwiperModule, imports: [BsSwipeDirective, BsSwipeContainerDirective], exports: [BsSwipeDirective, BsSwipeContainerDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSwiperModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsSwiperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSwiperModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: [BsSwipeDirective, BsSwipeContainerDirective],
+                    imports: [BsSwipeDirective, BsSwipeContainerDirective],
                     exports: [BsSwipeDirective, BsSwipeContainerDirective],
                 }]
         }] });