ngx-edge-slider 2.2.2 → 2.2.4

package/fesm2022/WingmanColt-ngx-edge-slider.mjs

@@ -0,0 +1,824 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, NgModule, Pipe } from '@angular/core';
+import { BehaviorSubject, Subject, fromEvent, merge, auditTime, takeUntil } from 'rxjs';
+import * as i7 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/platform-browser';
+
+const DEFAULT_CONFIG = {
+    slides: [],
+    slidesPerView: 1,
+    slidesToSlide: 1,
+    loop: 0,
+    vertical: false,
+    changeToClickedSlide: false,
+    isThumbs: false,
+    plugins: {
+        draggable: false,
+        pagination: false,
+        navigation: false,
+        autoplay: undefined,
+    },
+    gap: 0,
+    showOn: { mobile: true, tablet: true, desktop: true },
+};
+
+const INITIAL_SLIDER_STATE = {
+    currentSlide: 0,
+    selectedSlide: -1,
+    slidesPerView: 1,
+    visibleSlides: [],
+    gap: 0,
+    maxStartIndex: 0,
+    canPrev: false,
+    canNext: false,
+    translate: "translateX(0px)",
+    transition: "transform 300ms ease",
+    pager: null,
+    isAnimating: false,
+    isVisible: false,
+    isDragging: false,
+};
+
+class SliderStore {
+    state$ = new BehaviorSubject({
+        currentSlide: 0,
+        selectedSlide: -1,
+        slidesPerView: 1,
+        visibleSlides: [],
+        translate: "translateX(0)",
+        transition: "transform 300ms ease",
+        pager: null,
+        isVisible: true,
+        isAnimating: false,
+        isDragging: false,
+    });
+    view$ = this.state$.asObservable();
+    get snapshot() {
+        return this.state$.value;
+    }
+    update(patch) {
+        this.state$.next({ ...this.snapshot, ...patch });
+    }
+    reset() {
+        this.state$.next(INITIAL_SLIDER_STATE);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderStore });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderStore, decorators: [{
+            type: Injectable
+        }] });
+
+class SliderEngine {
+    store;
+    config;
+    plugins = [];
+    syncThumbsEngine;
+    // RX lifecycle
+    destroy$ = new Subject();
+    // Container-based breakpoints
+    containerEl;
+    ro;
+    measuredSlideSizePx;
+    constructor(store) {
+        this.store = store;
+    }
+    /* ---------------- Public API ---------------- */
+    init(config, plugins = []) {
+        this.config = { ...DEFAULT_CONFIG, ...config, plugins: { ...(config.plugins ?? {}) } };
+        this.plugins = plugins;
+        this.plugins.forEach((p) => p.init?.(this));
+        this.setupViewportSignals();
+        this.applyBreakpoint();
+        this.clampIndicesAfterLayoutChange();
+        this.recalculate();
+    }
+    /** Call this from the component once you have the slider host element */
+    attachContainer(el) {
+        this.containerEl = el;
+        // Observe container size changes (robust in grids/sidebars/tabs)
+        this.ro?.disconnect();
+        this.ro = new ResizeObserver(() => {
+            // We reuse the same debounced layout handler
+            this.onLayoutSignal();
+        });
+        this.ro.observe(el);
+        this.measureSlideSize();
+        // Apply immediately based on real container width
+        this.onLayoutSignal();
+    }
+    measureSlideSize() {
+        if (!this.containerEl)
+            return;
+        const firstSlide = this.containerEl.querySelector(".slide");
+        if (!firstSlide)
+            return;
+        const rect = firstSlide.getBoundingClientRect();
+        if (rect.width > 0)
+            this.measuredSlideSizePx = rect.width;
+    }
+    destroy() {
+        // Stop Rx streams
+        this.destroy$.next();
+        this.destroy$.complete();
+        // Disconnect ResizeObserver
+        this.ro?.disconnect();
+        this.ro = undefined;
+        this.containerEl = undefined;
+        // Plugin cleanup
+        this.plugins.forEach((p) => p.destroy?.());
+        this.plugins = [];
+        // Reset store
+        this.store.reset();
+    }
+    next() {
+        this.goTo(this.store.snapshot.currentSlide + this.slideStep());
+        this.plugins.forEach((p) => p.onNext?.());
+    }
+    previous() {
+        this.goTo(this.store.snapshot.currentSlide - this.slideStep());
+        this.plugins.forEach((p) => p.onPrevious?.());
+    }
+    getContainerEl() {
+        return this.containerEl;
+    }
+    selectSlide(index) {
+        const slidesPerView = this.store.snapshot.slidesPerView;
+        // 1️⃣ Mark selected
+        this.store.update({ selectedSlide: index });
+        // 2️⃣ Calculate page start
+        let pageStart = Math.floor(index / slidesPerView) * slidesPerView;
+        // 3️⃣ Clamp to maxStartIndex
+        pageStart = Math.min(pageStart, this.maxStartIndex);
+        // 4️⃣ If synced with thumbs, also clamp to their max index
+        if (this.syncThumbsEngine) {
+            const thumbMaxIndex = this.syncThumbsEngine.getMaxStartIndex();
+            pageStart = Math.min(pageStart, thumbMaxIndex);
+        }
+        // 5️⃣ Move main slider
+        if (pageStart !== this.store.snapshot.currentSlide) {
+            this.goToSlide(pageStart);
+        }
+        // 6️⃣ Notify plugins
+        this.plugins.forEach((p) => p.onSlideClick?.(index));
+    }
+    /* ---------------- Drag ---------------- */
+    handleDragStart(event) {
+        this.store.update({ isDragging: true });
+        this.plugins.forEach((p) => p.onDragStart?.(event));
+    }
+    handleDragMove(event) {
+        this.plugins.forEach((p) => p.onDragMove?.(event));
+    }
+    handleDragEnd() {
+        this.store.update({ isDragging: false });
+        this.plugins.forEach((p) => p.onDragEnd?.());
+    }
+    goTo(index) {
+        this.goToSlide(index); // reuse your existing private method
+    }
+    /* ---------------- Internals ---------------- */
+    goToSlide(index) {
+        const clamped = Math.max(0, Math.min(index, this.maxStartIndex));
+        // console.log("[Engine] goToSlide index:", index, "clamped:", clamped);
+        this.store.update({ currentSlide: clamped });
+        this.recalculate();
+        // NOTE: calling onSlideClick here is a bit semantically odd (since it’s not always a click),
+        // but I preserved your behavior.
+        this.plugins.forEach((p) => p.onSlideClick?.(index));
+    }
+    recalculate() {
+        if (this.store.snapshot.isDragging)
+            return; // skip during drag
+        const slides = this.config.slides ?? [];
+        const maxStartIndex = this.getMaxStartIndex();
+        const current = this.store.snapshot.currentSlide;
+        this.store.update({
+            visibleSlides: slides,
+            translate: this.translate(current),
+            pager: this.buildPager(),
+            maxStartIndex,
+            canPrev: current > 0,
+            canNext: current < maxStartIndex,
+        });
+    }
+    translate(index) {
+        const axis = this.config.vertical ? "Y" : "X";
+        const containerSize = this.containerEl
+            ? this.config.vertical
+                ? this.containerEl.clientHeight
+                : this.containerEl.clientWidth
+            : this.config.vertical
+                ? window.innerHeight
+                : window.innerWidth;
+        const gap = this.store.snapshot.gap ?? 0;
+        const spv = this.store.snapshot.slidesPerView;
+        const slideSize = this.config.isThumbs && this.measuredSlideSizePx
+            ? this.measuredSlideSizePx
+            : spv > 0
+                ? (containerSize - gap * (spv - 1)) / spv
+                : containerSize;
+        // move by "pageStart * (slideSize + gap)"
+        const offset = index * (slideSize + gap);
+        return `translate${axis}(-${offset}px)`;
+    }
+    /** Debounced layout signals for resize/orientation/container changes */
+    setupViewportSignals() {
+        // If you want "only after resizing stops", replace auditTime with debounceTime(120)
+        const resize$ = fromEvent(window, "resize", { passive: true });
+        const orientation$ = fromEvent(window, "orientationchange", { passive: true });
+        merge(resize$, orientation$)
+            .pipe(auditTime(80), // good compromise: responsive without over-recalc
+        takeUntil(this.destroy$))
+            .subscribe(() => this.onLayoutSignal());
+    }
+    onLayoutSignal() {
+        const beforeSlidesPerView = this.store.snapshot.slidesPerView;
+        const beforeVisible = this.store.snapshot.isVisible;
+        this.applyBreakpoint();
+        const afterSlidesPerView = this.store.snapshot.slidesPerView;
+        const afterVisible = this.store.snapshot.isVisible;
+        if (beforeSlidesPerView !== afterSlidesPerView || beforeVisible !== afterVisible) {
+            this.clampIndicesAfterLayoutChange();
+        }
+        this.measureSlideSize();
+        this.recalculate();
+    }
+    getBreakpointWidth() {
+        if (this.containerEl) {
+            // Prefer clientWidth (layout), fallback to rect width
+            return this.containerEl.clientWidth || this.containerEl.getBoundingClientRect().width || window.innerWidth;
+        }
+        return window.innerWidth;
+    }
+    applyBreakpoint() {
+        const width = this.getBreakpointWidth();
+        const bp = this.config.breakpoints;
+        let override;
+        let device = "desktop";
+        if (width < 768) {
+            override = bp?.mobile;
+            device = "mobile";
+        }
+        else if (width < 1024) {
+            override = bp?.tablet;
+            device = "tablet";
+        }
+        else {
+            override = bp?.desktop;
+            device = "desktop";
+        }
+        // Merge overrides
+        this.config = { ...this.config, ...override };
+        this.store.update({
+            slidesPerView: this.config.slidesPerView,
+            gap: this.config.gap ?? 0, // ✅ NEW
+            isVisible: this.config.showOn?.[device] ?? true,
+        });
+    }
+    clampIndicesAfterLayoutChange() {
+        const max = this.getMaxStartIndex();
+        const current = this.store.snapshot.currentSlide;
+        const selected = this.store.snapshot.selectedSlide;
+        const clampedCurrent = Math.max(0, Math.min(current, max));
+        const clampedSelected = selected === -1 ? -1 : Math.max(0, Math.min(selected, (this.config.slides?.length ?? 0) - 1));
+        this.store.update({
+            currentSlide: clampedCurrent,
+            selectedSlide: clampedSelected,
+        });
+    }
+    buildPager() {
+        const totalSlides = this.config.slides.length;
+        const currentSlide = this.store.snapshot.selectedSlide !== -1 ? this.store.snapshot.selectedSlide : this.store.snapshot.currentSlide;
+        const maxVisibleDots = 5;
+        let start = Math.max(0, currentSlide - Math.floor(maxVisibleDots / 2));
+        let end = start + maxVisibleDots;
+        if (end > totalSlides) {
+            end = totalSlides;
+            start = Math.max(0, end - maxVisibleDots);
+        }
+        const visibleDots = Array.from({ length: end - start }, (_, i) => start + i);
+        const activeDotIndex = visibleDots.indexOf(currentSlide);
+        return {
+            currentPage: currentSlide,
+            totalPages: totalSlides,
+            visibleDots,
+            activeDotIndex,
+        };
+    }
+    slideStep() {
+        return this.store.snapshot.slidesPerView;
+    }
+    get maxStartIndex() {
+        const total = this.config.slides?.length ?? 0;
+        return Math.max(0, total - this.store.snapshot.slidesPerView);
+    }
+    getMaxStartIndex() {
+        const total = this.config.slides?.length ?? 0;
+        const spv = this.store.snapshot.slidesPerView || 1;
+        return Math.max(0, total - spv);
+    }
+    /* -------- Plugin-safe API -------- */
+    getState() {
+        return this.store.snapshot;
+    }
+    getStateObservable() {
+        return this.store.view$;
+    }
+    setState(patch) {
+        this.store.update(patch);
+    }
+    getConfig() {
+        return this.config;
+    }
+    /** Link this slider to thumbs */
+    syncWithThumbs(thumbsEngine) {
+        this.syncThumbsEngine = thumbsEngine;
+    }
+    /* -------- Read-only helpers -------- */
+    getSlidesPerView() {
+        return this.store.snapshot.slidesPerView;
+    }
+    getCurrentSlide() {
+        return this.store.snapshot.currentSlide;
+    }
+    getSelectedSlide() {
+        return this.store.snapshot.selectedSlide;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderEngine, deps: [{ token: SliderStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderEngine });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderEngine, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: SliderStore }] });
+
+class SliderAutoplayPlugin {
+    engine;
+    timerId;
+    delay = 4000; // default
+    init(engine) {
+        this.engine = engine;
+        this.start();
+    }
+    setConfig(config) {
+        if (!config)
+            return;
+        if (typeof config.delay === "number") {
+            this.delay = config.delay;
+        }
+        // restart autoplay with new config
+        this.start();
+    }
+    onDragStart() {
+        this.stop();
+    }
+    onDragEnd() {
+        this.start();
+    }
+    start() {
+        this.stop();
+        this.timerId = setInterval(() => {
+            this.engine.next();
+        }, this.delay);
+    }
+    stop() {
+        if (this.timerId) {
+            clearInterval(this.timerId);
+            this.timerId = null;
+        }
+    }
+    destroy() {
+        this.stop();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderAutoplayPlugin, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderAutoplayPlugin });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderAutoplayPlugin, decorators: [{
+            type: Injectable
+        }] });
+
+class SliderDraggablePlugin {
+    engine;
+    startX = 0;
+    deltaX = 0;
+    hasDragged = false;
+    isDragging = false;
+    dragThreshold = 50;
+    // Expose drag state to template
+    get isDraggingPointer() {
+        return this.isDragging;
+    }
+    init(engine) {
+        this.engine = engine;
+    }
+    onDragStart(event) {
+        this.startX = event.clientX;
+        this.deltaX = 0;
+        this.hasDragged = false;
+        this.isDragging = true;
+        // Set engine dragging state
+        this.engine.setState({ isDragging: true });
+    }
+    onDragMove(event) {
+        if (!this.isDragging)
+            return;
+        const moveX = event.clientX - this.startX;
+        this.deltaX += moveX;
+        this.hasDragged = true;
+        const currentTranslate = this.extractTranslate(this.engine.getState().translate);
+        const newTranslate = currentTranslate + moveX;
+        this.engine.setState({ translate: `translateX(${newTranslate}px)` });
+        this.startX = event.clientX;
+    }
+    onDragEnd() {
+        if (this.hasDragged) {
+            if (this.deltaX > this.dragThreshold) {
+                this.engine.previous();
+            }
+            else if (this.deltaX < -this.dragThreshold) {
+                this.engine.next();
+            }
+            else {
+                // Small drag → snap back
+                this.engine.recalculate();
+            }
+        }
+        this.isDragging = false;
+        this.hasDragged = false;
+        this.deltaX = 0;
+        this.engine.setState({ isDragging: false });
+    }
+    /** Extract numeric value from 'translateX(-123px)' */
+    extractTranslate(transform) {
+        if (!transform)
+            return 0;
+        const match = transform.match(/-?\d+(\.\d+)?/);
+        return match ? parseFloat(match[0]) : 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderDraggablePlugin, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderDraggablePlugin });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderDraggablePlugin, decorators: [{
+            type: Injectable
+        }] });
+
+class SliderNavigationPlugin {
+    engine;
+    isPagerMode = false;
+    _canPrev$ = new BehaviorSubject(false);
+    _canNext$ = new BehaviorSubject(false);
+    sub;
+    get canPrev$() {
+        return this._canPrev$.asObservable();
+    }
+    get canNext$() {
+        return this._canNext$.asObservable();
+    }
+    init(engine, isPagerMode = false) {
+        this.engine = engine;
+        this.isPagerMode = isPagerMode;
+        // Subscribe to state changes
+        this.sub = this.engine.getStateObservable?.()?.subscribe(() => this.updateArrows());
+        // ✅ Force initial check after a short delay (to catch async slides)
+        setTimeout(() => this.updateArrows());
+    }
+    destroy() {
+        this.sub?.unsubscribe();
+    }
+    next() {
+        if (!this.engine)
+            return;
+        if (this.isPagerMode) {
+            const state = this.engine.getState();
+            const cfg = this.engine.getConfig();
+            const totalSlides = cfg?.slides?.length ?? 0;
+            const perView = state?.slidesPerView ?? cfg?.slidesPerView ?? 1;
+            const step = cfg?.slidesToSlide ?? 1;
+            const maxIndex = Math.max(0, totalSlides - perView);
+            const current = state?.currentSlide ?? 0;
+            const newIndex = Math.min(maxIndex, current + step);
+            this.engine.goTo(newIndex);
+        }
+        else {
+            this.engine.next();
+        }
+    }
+    prev() {
+        if (!this.engine)
+            return;
+        if (this.isPagerMode) {
+            const state = this.engine.getState();
+            const cfg = this.engine.getConfig();
+            const step = cfg?.slidesToSlide ?? 1;
+            const current = state?.currentSlide ?? 0;
+            const newIndex = Math.max(0, current - step);
+            this.engine.goTo(newIndex);
+        }
+        else {
+            this.engine.previous();
+        }
+    }
+    updateArrows() {
+        if (!this.engine)
+            return;
+        const state = this.engine.getState();
+        const cfg = this.engine.getConfig();
+        const totalSlides = cfg?.slides?.length ?? 0;
+        const perView = state?.slidesPerView ?? 1;
+        const canPrev = totalSlides > 0 && (state?.currentSlide ?? 0) > 0;
+        const canNext = totalSlides > 0 && (state?.currentSlide ?? 0) < Math.max(0, totalSlides - perView);
+        if (this._canPrev$.value !== canPrev)
+            this._canPrev$.next(canPrev);
+        if (this._canNext$.value !== canNext)
+            this._canNext$.next(canNext);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderNavigationPlugin, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderNavigationPlugin });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderNavigationPlugin, decorators: [{
+            type: Injectable
+        }] });
+
+class SliderPaginationPlugin {
+    engine;
+    maxVisibleDots = 10;
+    sub;
+    _pager$ = new BehaviorSubject(null);
+    pager$ = this._pager$.asObservable();
+    init(engine) {
+        this.engine = engine;
+        this.sub = this.engine.getStateObservable().subscribe(() => {
+            this.updatePager();
+        });
+        // initial
+        setTimeout(() => this.updatePager());
+    }
+    destroy() {
+        this.sub?.unsubscribe();
+        this._pager$.next(null);
+    }
+    /** Go to a slide by slide index (NOT dot index) */
+    goToSlide(slideIndex) {
+        this.engine.selectSlide(slideIndex);
+    }
+    updatePager() {
+        const state = this.engine.getState();
+        const totalSlides = state.visibleSlides?.length ?? 0;
+        if (totalSlides <= 0) {
+            this._pager$.next(null);
+            return;
+        }
+        // ✅ important: selectedSlide is -1 initially; fallback to currentSlide
+        const current = state.selectedSlide !== -1 ? state.selectedSlide : state.currentSlide;
+        const maxDots = Math.max(1, this.maxVisibleDots);
+        // ✅ clamp to >= 0
+        const safeCurrent = Math.max(0, Math.min(current, totalSlides - 1));
+        const pageStart = Math.max(0, Math.floor(safeCurrent / maxDots) * maxDots);
+        const pageEnd = Math.min(pageStart + maxDots, totalSlides);
+        const visibleDots = Array.from({ length: pageEnd - pageStart }, (_, i) => pageStart + i);
+        const activeDotIndex = visibleDots.indexOf(safeCurrent);
+        this._pager$.next({ visibleDots, activeDotIndex });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderPaginationPlugin, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderPaginationPlugin });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderPaginationPlugin, decorators: [{
+            type: Injectable
+        }] });
+
+class SimpleSliderComponent {
+    engine;
+    store;
+    draggable;
+    pagination;
+    navigation;
+    autoplay;
+    config;
+    slideTemplate;
+    navigationTemplate;
+    paginationTemplate;
+    slideChange = new EventEmitter();
+    isDraggingPointer = false;
+    dragStartX = 0;
+    dragStartY = 0;
+    lastIndex = -1;
+    lastSlidesRef = null;
+    destroy$ = new Subject();
+    state$;
+    sliderHost;
+    constructor(engine, store, draggable, pagination, navigation, autoplay) {
+        this.engine = engine;
+        this.store = store;
+        this.draggable = draggable;
+        this.pagination = pagination;
+        this.navigation = navigation;
+        this.autoplay = autoplay;
+    }
+    ngOnInit() {
+        this.state$ = this.store.view$;
+        this.state$.pipe(takeUntil(this.destroy$)).subscribe((state) => {
+            if (state.currentSlide !== this.lastIndex) {
+                this.lastIndex = state.currentSlide;
+                this.slideChange.emit(state.currentSlide);
+            }
+        });
+        this.lastSlidesRef = this.config?.slides ?? null;
+        this.resolvePlugins(this.config);
+    }
+    ngAfterViewInit() {
+        if (this.sliderHost?.nativeElement) {
+            this.engine.attachContainer(this.sliderHost.nativeElement);
+        }
+    }
+    ngOnChanges(changes) {
+        if (!changes["config"] || !this.config)
+            return;
+        const newSlidesRef = this.config.slides ?? null;
+        if (newSlidesRef !== this.lastSlidesRef) {
+            this.lastSlidesRef = newSlidesRef;
+            this.engine.destroy();
+            this.resolvePlugins(this.config);
+        }
+    }
+    ngOnDestroy() {
+        this.destroySlider();
+    }
+    goTo(index) {
+        this.engine.selectSlide(index); // add this line
+        //this.slideChange.emit(index);
+    }
+    destroySlider() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.engine.destroy();
+    } // destroys plugins and clears store
+    onNext() {
+        this.engine.next();
+    }
+    onPrevious() {
+        this.engine.previous();
+    }
+    selectSlide(index) {
+        this.engine.selectSlide(index);
+    }
+    onRecalculate() {
+        this.engine.recalculate();
+    }
+    // Navigation
+    /** Expose navigation observables safely */
+    get canPrev$() {
+        if (!this.navigation) {
+            console.warn("Navigation plugin is not enabled.");
+            return null;
+        }
+        return this.navigation.canPrev$;
+    }
+    get canNext$() {
+        if (!this.navigation) {
+            console.warn("Navigation plugin is not enabled.");
+            return null;
+        }
+        return this.navigation.canNext$;
+    }
+    /** Expose next/prev methods */
+    next() {
+        this.navigation?.next();
+    }
+    prev() {
+        this.navigation?.prev();
+    }
+    /** Expose pagination observable */
+    get pager$() {
+        if (!this.pagination) {
+            console.warn("Pagination plugin is not enabled for this slider.");
+            return null;
+        }
+        return this.pagination.pager$;
+    }
+    /** Expose a goToSlide method */
+    goToSlide(index) {
+        this.pagination.goToSlide(index);
+    }
+    // Handle Pointers
+    onPointerDown(event) {
+        // Only start drag if not clicking a nav button
+        if (event.target.closest(".nav-btn")) {
+            return; // ignore
+        }
+        this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        this.isDraggingPointer = false;
+        // Do not capture yet; wait until movement exceeds threshold
+        this.engine.handleDragStart(event);
+    }
+    onPointerMove(event) {
+        const dx = Math.abs(event.clientX - this.dragStartX);
+        const dy = Math.abs(event.clientY - this.dragStartY);
+        if (!this.isDraggingPointer && (dx > 5 || dy > 5)) {
+            this.isDraggingPointer = true;
+            // Now start capturing pointer so dragging works outside the slider bounds
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }
+        if (this.isDraggingPointer) {
+            this.engine.handleDragMove(event);
+        }
+    }
+    onPointerUp(event) {
+        if (!event)
+            return;
+        if (!this.isDraggingPointer) {
+            const target = event.target;
+            // Only select the slide if click is not on an interactive child
+            const slideEl = target.closest(".slide");
+            if (slideEl && !target.closest("button, video, a")) {
+                const indexAttr = slideEl.getAttribute("data-index");
+                const index = indexAttr ? parseInt(indexAttr, 10) : null;
+                if (index !== null)
+                    this.engine.selectSlide(index);
+            }
+        }
+        this.engine.handleDragEnd();
+        this.isDraggingPointer = false;
+        // Release pointer capture if it was captured
+        try {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        catch { }
+    }
+    resolvePlugins(config) {
+        const runtimePlugins = [];
+        const cfg = config.plugins ?? {}; // <-- safe fallback
+        if (cfg.draggable)
+            runtimePlugins.push(this.draggable);
+        if (cfg.pagination)
+            runtimePlugins.push(this.pagination);
+        if (cfg.navigation)
+            runtimePlugins.push(this.navigation);
+        if (cfg.autoplay) {
+            this.autoplay.setConfig(cfg.autoplay);
+            runtimePlugins.push(this.autoplay);
+        }
+        this.engine.init({ ...config, plugins: undefined }, runtimePlugins);
+        if (cfg.navigation) {
+            setTimeout(() => this.navigation?.updateArrows?.());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleSliderComponent, deps: [{ token: SliderEngine }, { token: SliderStore }, { token: SliderDraggablePlugin }, { token: SliderPaginationPlugin }, { token: SliderNavigationPlugin }, { token: SliderAutoplayPlugin }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SimpleSliderComponent, isStandalone: true, selector: "app-simple-slider", inputs: { config: "config", slideTemplate: "slideTemplate", navigationTemplate: "navigationTemplate", paginationTemplate: "paginationTemplate" }, outputs: { slideChange: "slideChange" }, providers: [SliderEngine, SliderStore, SliderDraggablePlugin, SliderPaginationPlugin, SliderNavigationPlugin, SliderAutoplayPlugin], viewQueries: [{ propertyName: "sliderHost", first: true, predicate: ["sliderHost"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\r\n  <div\r\n    class=\"slider\"\r\n    #sliderHost\r\n    [class.slider-vertical]=\"state.vertical\"\r\n    [class.slider-draggable]=\"state.isDragging\"\r\n    [class.slider--main]=\"!config.isThumbs\"\r\n    [class.slider--thumbs]=\"config.isThumbs\"\r\n    *ngIf=\"state.visibleSlides?.length > 0 && state.isVisible\"\r\n    (pointerdown)=\"onPointerDown($event)\"\r\n    (pointermove)=\"onPointerMove($event)\"\r\n    (pointerup)=\"onPointerUp($event)\"\r\n    (pointercancel)=\"onPointerUp($event)\">\r\n    <div\r\n      class=\"slider__wrapper\"\r\n      [ngStyle]=\"{\r\n        transform: state.translate,\r\n        transition: draggable.isDraggingPointer ? 'none' : 'transform 0.3s ease',\r\n        display: 'flex',\r\n        'flex-direction': state.vertical ? 'column' : 'row',\r\n        'justify-content': state.visibleSlides?.length < state.slidesPerView ? 'center' : 'flex-start',\r\n        gap: (state.slidesPerView > 1 ? state.gap || 0 : 0) + 'px',\r\n      }\">\r\n      <div\r\n        *ngFor=\"let slide of state.visibleSlides; let i = index\"\r\n        class=\"slide\"\r\n        [attr.data-index]=\"i\"\r\n        [class.slide--current]=\"state.selectedSlide === i\"\r\n        [style.flex]=\"\r\n          !config.isThumbs\r\n            ? '0 0 calc(' +\r\n              100 / state.slidesPerView +\r\n              '% - ' +\r\n              ((state.gap || 0) * (state.slidesPerView - 1)) / state.slidesPerView +\r\n              'px)'\r\n            : '0 0 ' + thumbSize + 'px'\r\n        \"\r\n        [style.width]=\"config.isThumbs ? thumbSize + 'px' : null\"\r\n        [style.height]=\"config.isThumbs ? thumbSize + 'px' : null\"\r\n        (click)=\"engine.selectSlide(i)\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"slideTemplate ? slideTemplate : defaultSlideTemplate; context: { slide: slide, index: i }\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-simple-slider", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], providers: [SliderEngine, SliderStore, SliderDraggablePlugin, SliderPaginationPlugin, SliderNavigationPlugin, SliderAutoplayPlugin], template: "<ng-container *ngIf=\"state$ | async as state\">\r\n  <div\r\n    class=\"slider\"\r\n    #sliderHost\r\n    [class.slider-vertical]=\"state.vertical\"\r\n    [class.slider-draggable]=\"state.isDragging\"\r\n    [class.slider--main]=\"!config.isThumbs\"\r\n    [class.slider--thumbs]=\"config.isThumbs\"\r\n    *ngIf=\"state.visibleSlides?.length > 0 && state.isVisible\"\r\n    (pointerdown)=\"onPointerDown($event)\"\r\n    (pointermove)=\"onPointerMove($event)\"\r\n    (pointerup)=\"onPointerUp($event)\"\r\n    (pointercancel)=\"onPointerUp($event)\">\r\n    <div\r\n      class=\"slider__wrapper\"\r\n      [ngStyle]=\"{\r\n        transform: state.translate,\r\n        transition: draggable.isDraggingPointer ? 'none' : 'transform 0.3s ease',\r\n        display: 'flex',\r\n        'flex-direction': state.vertical ? 'column' : 'row',\r\n        'justify-content': state.visibleSlides?.length < state.slidesPerView ? 'center' : 'flex-start',\r\n        gap: (state.slidesPerView > 1 ? state.gap || 0 : 0) + 'px',\r\n      }\">\r\n      <div\r\n        *ngFor=\"let slide of state.visibleSlides; let i = index\"\r\n        class=\"slide\"\r\n        [attr.data-index]=\"i\"\r\n        [class.slide--current]=\"state.selectedSlide === i\"\r\n        [style.flex]=\"\r\n          !config.isThumbs\r\n            ? '0 0 calc(' +\r\n              100 / state.slidesPerView +\r\n              '% - ' +\r\n              ((state.gap || 0) * (state.slidesPerView - 1)) / state.slidesPerView +\r\n              'px)'\r\n            : '0 0 ' + thumbSize + 'px'\r\n        \"\r\n        [style.width]=\"config.isThumbs ? thumbSize + 'px' : null\"\r\n        [style.height]=\"config.isThumbs ? thumbSize + 'px' : null\"\r\n        (click)=\"engine.selectSlide(i)\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"slideTemplate ? slideTemplate : defaultSlideTemplate; context: { slide: slide, index: i }\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [{ type: SliderEngine }, { type: SliderStore }, { type: SliderDraggablePlugin }, { type: SliderPaginationPlugin }, { type: SliderNavigationPlugin }, { type: SliderAutoplayPlugin }], propDecorators: { config: [{
+                type: Input
+            }], slideTemplate: [{
+                type: Input
+            }], navigationTemplate: [{
+                type: Input
+            }], paginationTemplate: [{
+                type: Input
+            }], slideChange: [{
+                type: Output
+            }], sliderHost: [{
+                type: ViewChild,
+                args: ["sliderHost", { static: false }]
+            }] } });
+
+class NgxEdgeSliderModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgxEdgeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: NgxEdgeSliderModule, imports: [SimpleSliderComponent], exports: [SimpleSliderComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgxEdgeSliderModule, imports: [SimpleSliderComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgxEdgeSliderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SimpleSliderComponent],
+                    exports: [SimpleSliderComponent],
+                }]
+        }] });
+
+class SafeUrlPipe {
+    sanitizer;
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(url) {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SafeUrlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SafeUrlPipe, name: "safeUrl" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SafeUrlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: "safeUrl" }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+
+// components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_CONFIG, INITIAL_SLIDER_STATE, NgxEdgeSliderModule, SafeUrlPipe, SimpleSliderComponent, SliderAutoplayPlugin, SliderDraggablePlugin, SliderEngine, SliderNavigationPlugin, SliderPaginationPlugin, SliderStore };
+//# sourceMappingURL=WingmanColt-ngx-edge-slider.mjs.map