@nanahoshi/mona-ui 0.18.6 → 0.20.0

package/fesm2022/nanahoshi-mona-ui-scroll-view.mjs

@@ -1,11 +1,12 @@
-import { NgTemplateOutlet } from '@angular/common';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, input, Directive, inject, DestroyRef, DOCUMENT, ElementRef, contentChild, TemplateRef, signal, viewChild, model, afterNextRender, Component } from '@angular/core';
+import { computed, input, Directive, inject, DestroyRef, DOCUMENT, ElementRef, PLATFORM_ID, signal, contentChild, TemplateRef, viewChild, model, effect, afterRenderEffect, afterNextRender, Component } from '@angular/core';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { toCssValue } from '@nanahoshi/mona-ui/internal';
 import { select } from '@mirei/ts-collections';
-import { startWith, pairwise, map, Subject, timer, interval, takeUntil, asyncScheduler, fromEvent, filter, tap } from 'rxjs';
+import { Subject, startWith, pairwise, map, interval, takeUntil, asyncScheduler, fromEvent, filter, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
+import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 
 const scrollViewBaseThemeVariants = cva(`
@@ -47,18 +48,14 @@ const scrollViewArrowThemeVariants = cva(`
             true: "hidden",
             false: ""
         },
-        left: {
-            true: "left-0",
-            false: ""
-        },
-        right: {
-            true: "right-0",
-            false: ""
+        side: {
+            left: "left-0",
+            right: "right-0"
         }
     }
 });
 const scrollViewPagerThemeVariants = cva(`
-        absolute right-0 bottom-0 left-0 flex items-center justify-center
+        absolute inset-x-0 bottom-0 flex items-center justify-center
     `, {
     variants: {
         pagerOverlay: {
@@ -136,53 +133,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }] } });
 
+const SCROLL_VIEW_DEFAULT_MESSAGES = {
+    carousel: "carousel",
+    nextPage: "Next page",
+    page: (current) => `Page ${current}`,
+    pageOf: (current, total) => `Page ${current} of ${total}`,
+    previousPage: "Previous page",
+    scrollPagerPrevious: "Scroll pager previous",
+    scrollPagerNext: "Scroll pager next",
+    slide: "slide"
+};
+
+function normalizeScrollViewIndex(rawIndex, itemCount, infinite) {
+    if (itemCount <= 0) {
+        return 0;
+    }
+    const finiteIndex = Number.isFinite(rawIndex) ? Math.trunc(rawIndex) : 0;
+    if (infinite) {
+        return ((finiteIndex % itemCount) + itemCount) % itemCount;
+    }
+    return Math.max(0, Math.min(itemCount - 1, finiteIndex));
+}
 class ScrollViewComponent {
     #destroyRef;
-    #document;
-    #viewIndex;
+    #direction;
     #directionFromIndex;
+    #document;
     #hostElementRef;
-    #resizeObserver;
+    #i18n;
+    #platformId;
+    #pointerCancelHandler;
+    #pointerUpHandler;
+    #prefersReducedMotion;
+    #rejectedPagerPointers;
     #scroll$;
-    #scrollMouseUpHandler;
+    #suppressedPagerClickPointerIds;
+    #viewIndex;
+    #activePagerPointerControl;
+    #activePagerPointerId;
+    #continuousTicked;
+    #pagerScrollCompletionCleanup;
+    #pagerScrollContext;
+    #resizeObserver;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
+        this.#direction = injectComponentDirection();
         this.#document = inject(DOCUMENT);
+        this.#hostElementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
+        this.#platformId = inject(PLATFORM_ID);
+        this.#pointerCancelHandler = (event) => this.#handlePointerEnd(event, false);
+        this.#pointerUpHandler = (event) => this.#handlePointerEnd(event, true);
+        this.#prefersReducedMotion = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#prefersReducedMotion" }] : /* istanbul ignore next */ []));
+        this.#rejectedPagerPointers = new Map();
+        this.#scroll$ = new Subject();
+        this.#suppressedPagerClickPointerIds = new Set();
         this.#viewIndex = computed(() => {
-            const infinite = this.infinite();
-            const index = this.index();
-            const viewData = this.viewData();
-            if (viewData.length === 0) {
-                return 0;
-            }
-            return infinite ? index % viewData.length : index;
+            return normalizeScrollViewIndex(this.index(), this.itemCount(), this.infinite());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#viewIndex" }] : /* istanbul ignore next */ []));
-        this.#directionFromIndex = toSignal(toObservable(this.#viewIndex).pipe(startWith(0), pairwise(), map(([prevIndex, index]) => {
-            const infinite = this.infinite();
-            const totalItems = this.itemCount();
-            if (infinite && totalItems > 1) {
-                const lastIndex = totalItems - 1;
-                if (prevIndex === lastIndex && index === 0) {
-                    return "right";
-                }
-                if (prevIndex === 0 && index === lastIndex) {
-                    return "left";
-                }
-            }
-            return index < prevIndex ? "left" : "right";
-        })), {
-            initialValue: "right"
-        });
-        this.#hostElementRef = inject(ElementRef);
+        this.#activePagerPointerControl = null;
+        this.#activePagerPointerId = null;
+        this.#continuousTicked = false;
+        this.#pagerScrollCompletionCleanup = null;
+        this.#pagerScrollContext = null;
         this.#resizeObserver = null;
-        this.#scroll$ = new Subject();
-        this.#scrollMouseUpHandler = () => this.onPagerScrollEnd();
         this.animationDuration = computed(() => {
             const animate = this.animate();
             return typeof animate === "boolean" ? (animate ? 500 : 0) : animate;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = computed(() => {
+            const index = this.viewIndex();
+            const count = this.itemCount();
+            return count > 0 ? this.messages().pageOf(index + 1, count) : undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
             const rounded = this.rounded();
             const variantClass = scrollViewBaseThemeVariants({ rounded });
@@ -197,35 +224,48 @@ class ScrollViewComponent {
         this.contentTemplate = contentChild(TemplateRef, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
         this.enterAnimation = computed(() => {
-            return this.#directionFromIndex() === "right" ? "slide-in-from-right" : "slide-in-from-left";
+            const isRtl = this.isRtl();
+            const dir = this.#directionFromIndex();
+            const effectiveDir = isRtl ? (dir === "right" ? "left" : "right") : dir;
+            return effectiveDir === "right" ? "slide-in-from-right" : "slide-in-from-left";
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "enterAnimation" }] : /* istanbul ignore next */ []));
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.itemCount = computed(() => this.viewData().length, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "itemCount" }] : /* istanbul ignore next */ []));
         this.leaveAnimation = computed(() => {
-            return this.#directionFromIndex() === "right" ? "slide-out-to-left" : "slide-out-to-right";
+            const isRtl = this.isRtl();
+            const dir = this.#directionFromIndex();
+            const effectiveDir = isRtl ? (dir === "right" ? "left" : "right") : dir;
+            return effectiveDir === "right" ? "slide-out-to-left" : "slide-out-to-right";
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "leaveAnimation" }] : /* istanbul ignore next */ []));
         this.leftArrowClass = computed(() => {
-            const hidden = !this.arrows() || !(this.infinite() || this.index() !== 0);
-            return scrollViewArrowThemeVariants({ left: true, hidden });
+            const count = this.itemCount();
+            const hidden = !this.arrows() || count <= 1 || !(this.infinite() || this.viewIndex() !== 0);
+            const side = this.isRtl() ? "right" : "left";
+            return scrollViewArrowThemeVariants({ hidden, side });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "leftArrowClass" }] : /* istanbul ignore next */ []));
         this.listClass = computed(() => {
             return scrollViewListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("scrollView", SCROLL_VIEW_DEFAULT_MESSAGES);
         this.pagerArrowClass = computed(() => {
             return scrollViewPagerArrowThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerArrowClass" }] : /* istanbul ignore next */ []));
-        this.pagerArrowVisible = signal(true, /* @ts-ignore */
+        this.pagerArrowVisible = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerArrowVisible" }] : /* istanbul ignore next */ []));
         this.pagerClass = computed(() => {
             const pagerOverlay = this.pagerOverlay();
             return scrollViewPagerThemeVariants({ pagerOverlay });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerClass" }] : /* istanbul ignore next */ []));
+        this.pagerElementRef = viewChild("pagerElement", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerElementRef" }] : /* istanbul ignore next */ []));
         this.pagerListClass = computed(() => {
             return scrollViewPagerListThemeVariants();
         }, /* @ts-ignore */
@@ -237,10 +277,14 @@ class ScrollViewComponent {
         this.pagerListElementRef = viewChild("pagerListElement", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerListElementRef" }] : /* istanbul ignore next */ []));
         this.rightArrowClass = computed(() => {
-            const hidden = !this.arrows() || !(this.infinite() || this.index() !== this.itemCount() - 1);
-            return scrollViewArrowThemeVariants({ right: true, hidden });
+            const count = this.itemCount();
+            const hidden = !this.arrows() || count <= 1 || !(this.infinite() || this.viewIndex() !== count - 1);
+            const side = this.isRtl() ? "left" : "right";
+            return scrollViewArrowThemeVariants({ hidden, side });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rightArrowClass" }] : /* istanbul ignore next */ []));
+        this.scrollBehavior = computed(() => this.#prefersReducedMotion() ? "instant" : "smooth", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollBehavior" }] : /* istanbul ignore next */ []));
         this.scrollViewHeight = computed(() => {
             const height = this.height();
             return toCssValue(height);
@@ -257,12 +301,6 @@ class ScrollViewComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewData" }] : /* istanbul ignore next */ []));
         this.viewIndex = this.#viewIndex;
-        this.ariaLabel = computed(() => {
-            const index = this.viewIndex();
-            const count = this.itemCount();
-            return count > 0 ? `Page ${index + 1} of ${count}` : undefined;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets whether page transitions are animated.
          * Pass a boolean for default duration (500ms) or a number for custom duration in milliseconds.
@@ -337,13 +375,86 @@ class ScrollViewComponent {
          */
         this.width = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const rawIndex = this.index();
+            const count = this.itemCount();
+            if (count === 0) {
+                return;
+            }
+            const normalizedIndex = this.#viewIndex();
+            if (rawIndex !== normalizedIndex) {
+                this.index.set(normalizedIndex);
+            }
+        });
+        this.#directionFromIndex = toSignal(toObservable(this.#viewIndex).pipe(startWith(0), pairwise(), map(([prevIndex, index]) => {
+            const infinite = this.infinite();
+            const totalItems = this.itemCount();
+            if (infinite && totalItems > 1) {
+                const lastIndex = totalItems - 1;
+                if (prevIndex === lastIndex && index === 0) {
+                    return "right";
+                }
+                if (prevIndex === 0 && index === lastIndex) {
+                    return "left";
+                }
+            }
+            return index < prevIndex ? "left" : "right";
+        })), {
+            initialValue: "right"
+        });
+        if (isPlatformBrowser(this.#platformId) &&
+            typeof window !== "undefined" &&
+            typeof window.matchMedia === "function") {
+            const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+            const onPreferenceChange = (event) => this.#prefersReducedMotion.set(event.matches);
+            this.#prefersReducedMotion.set(mediaQuery.matches);
+            mediaQuery.addEventListener("change", onPreferenceChange);
+            this.#destroyRef.onDestroy(() => mediaQuery.removeEventListener("change", onPreferenceChange));
+        }
         this.#destroyRef.onDestroy(() => {
+            this.#stopContinuousScroll();
+            this.#resetPagerScrollState();
             this.#scroll$.complete();
             this.#resizeObserver?.disconnect();
-            this.#document.removeEventListener("mouseup", this.#scrollMouseUpHandler);
+        });
+        afterRenderEffect({
+            read: onCleanup => {
+                const pagerListElementRef = this.pagerListElementRef();
+                const pagerElementRef = this.pagerElementRef();
+                this.itemCount();
+                this.#resizeObserver?.disconnect();
+                this.#resizeObserver = null;
+                onCleanup(() => {
+                    this.#resizeObserver?.disconnect();
+                    this.#resizeObserver = null;
+                });
+                if (!pagerListElementRef || !pagerElementRef) {
+                    this.pagerArrowVisible.set(false);
+                    this.#resetPagerScrollState();
+                    return;
+                }
+                const element = pagerListElementRef.nativeElement;
+                const pagerElement = pagerElementRef.nativeElement;
+                if (this.#pagerScrollContext && this.#pagerScrollContext.element !== element) {
+                    this.#resetPagerScrollState();
+                }
+                this.#updatePagerArrowVisibility(element, pagerElement);
+                if (typeof ResizeObserver !== "undefined") {
+                    this.#resizeObserver = new ResizeObserver(() => {
+                        this.#updatePagerArrowVisibility(element, pagerElement);
+                        if (this.#pagerScrollContext && this.#pagerScrollContext.element === element) {
+                            const currentMaxScroll = Math.max(0, element.scrollWidth - element.clientWidth);
+                            if (this.#pagerScrollContext.maxScroll !== currentMaxScroll) {
+                                this.#resetPagerScrollState();
+                            }
+                        }
+                    });
+                    this.#resizeObserver.observe(element);
+                    this.#resizeObserver.observe(pagerElement);
+                }
+            }
         });
         afterNextRender(() => {
-            this.setPagerListResizeObserver();
             this.setSubscriptions();
             this.scrollActivePageIntoView();
         });
@@ -352,35 +463,259 @@ class ScrollViewComponent {
         this.navigate(direction, this.infinite());
     }
     onPageClick(index, element) {
+        this.#resetPagerScrollState();
         this.index.set(index);
-        element.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+        element.scrollIntoView({ behavior: this.scrollBehavior(), block: "nearest", inline: "center" });
+    }
+    onPagerClick(event, element, direction) {
+        if (event.button !== 0) {
+            return;
+        }
+        const isKeyboardActivation = event.detail === 0;
+        if (!isKeyboardActivation) {
+            const pointerId = "pointerId" in event && typeof event.pointerId === "number"
+                ? event.pointerId
+                : null;
+            if (pointerId !== null && pointerId !== -1) {
+                if (this.#rejectedPagerPointers.has(pointerId)) {
+                    this.#rejectedPagerPointers.delete(pointerId);
+                    this.#cleanupDocumentPointerListenersIfNeeded();
+                    return;
+                }
+                if (this.#suppressedPagerClickPointerIds.delete(pointerId)) {
+                    return;
+                }
+            }
+            else {
+                if (this.#rejectedPagerPointers.size === 1) {
+                    const firstKey = this.#rejectedPagerPointers.keys().next().value;
+                    if (firstKey !== undefined) {
+                        this.#rejectedPagerPointers.delete(firstKey);
+                        this.#cleanupDocumentPointerListenersIfNeeded();
+                        return;
+                    }
+                }
+                if (this.#suppressedPagerClickPointerIds.size === 1) {
+                    const firstId = this.#suppressedPagerClickPointerIds.values().next().value;
+                    if (firstId !== undefined) {
+                        this.#suppressedPagerClickPointerIds.delete(firstId);
+                        return;
+                    }
+                }
+            }
+        }
+        this.#scrollPagerBy(element, direction);
     }
-    onPagerScroll(element, direction, type) {
-        if (type === "continuous") {
-            this.#document.addEventListener("mouseup", this.#scrollMouseUpHandler, { once: true });
+    onPagerPointerDown(event, element, direction) {
+        if (!event.isPrimary || event.button !== 0) {
+            return;
+        }
+        const currentTarget = event.currentTarget;
+        const target = event.target;
+        this.#releasePagerPointerCapture(currentTarget, event.pointerId);
+        if (target !== currentTarget) {
+            this.#releasePagerPointerCapture(target, event.pointerId);
+        }
+        const control = (currentTarget ?? target);
+        if (this.#activePagerPointerId !== null) {
+            this.#rejectedPagerPointers.set(event.pointerId, {
+                control,
+                phase: "down"
+            });
+            this.#ensureDocumentPointerListeners();
+            return;
         }
-        const timeFunction = type === "single" ? timer : interval;
-        timeFunction(60)
+        this.#rejectedPagerPointers.delete(event.pointerId);
+        this.#suppressedPagerClickPointerIds.delete(event.pointerId);
+        this.#activePagerPointerId = event.pointerId;
+        this.#activePagerPointerControl = control;
+        this.#continuousTicked = false;
+        this.#ensureDocumentPointerListeners();
+        interval(60)
             .pipe(takeUntil(this.#scroll$), takeUntilDestroyed(this.#destroyRef))
             .subscribe(() => {
-            let left = 0;
-            switch (direction) {
-                case "left":
-                    left = Math.max(element.scrollLeft - 100, 0);
-                    element.scrollTo({ left, behavior: "smooth" });
-                    break;
-                case "right":
-                    left = Math.min(element.scrollLeft + 100, element.scrollWidth);
-                    element.scrollTo({ left, behavior: "smooth" });
-                    break;
-            }
+            this.#continuousTicked = true;
+            this.#scrollPagerBy(element, direction);
         });
     }
-    onPagerScrollEnd() {
-        this.#document.removeEventListener("mouseup", this.#scrollMouseUpHandler);
+    #armPagerScrollCompletion(element) {
+        if (this.#pagerScrollCompletionCleanup) {
+            this.#pagerScrollCompletionCleanup();
+            this.#pagerScrollCompletionCleanup = null;
+        }
+        const onScrollEnd = () => {
+            this.#resetPagerScrollState();
+        };
+        const supportsScrollEnd = isPlatformBrowser(this.#platformId) &&
+            typeof window !== "undefined" &&
+            "onscrollend" in element &&
+            typeof element.addEventListener === "function";
+        if (supportsScrollEnd) {
+            element.addEventListener("scrollend", onScrollEnd, { once: true });
+            this.#pagerScrollCompletionCleanup = () => {
+                element.removeEventListener?.("scrollend", onScrollEnd);
+            };
+        }
+        else {
+            let inactivityTimeoutId = null;
+            const scheduleInactivityTimeout = () => {
+                if (inactivityTimeoutId !== null && typeof window !== "undefined") {
+                    window.clearTimeout(inactivityTimeoutId);
+                }
+                if (isPlatformBrowser(this.#platformId) && typeof window !== "undefined") {
+                    inactivityTimeoutId = window.setTimeout(onScrollEnd, 150);
+                }
+            };
+            const onScroll = () => {
+                scheduleInactivityTimeout();
+            };
+            if (typeof element.addEventListener === "function") {
+                element.addEventListener("scroll", onScroll, { passive: true });
+            }
+            scheduleInactivityTimeout();
+            this.#pagerScrollCompletionCleanup = () => {
+                if (typeof element.removeEventListener === "function") {
+                    element.removeEventListener("scroll", onScroll);
+                }
+                if (inactivityTimeoutId !== null && typeof window !== "undefined") {
+                    window.clearTimeout(inactivityTimeoutId);
+                }
+            };
+        }
+    }
+    #cleanupDocumentPointerListenersIfNeeded() {
+        let hasDownRejected = false;
+        for (const p of this.#rejectedPagerPointers.values()) {
+            if (p.phase === "down") {
+                hasDownRejected = true;
+                break;
+            }
+        }
+        if (this.#activePagerPointerId === null && !hasDownRejected) {
+            this.#document.removeEventListener("pointerup", this.#pointerUpHandler);
+            this.#document.removeEventListener("pointercancel", this.#pointerCancelHandler);
+        }
+    }
+    #ensureDocumentPointerListeners() {
+        this.#document.addEventListener("pointerup", this.#pointerUpHandler);
+        this.#document.addEventListener("pointercancel", this.#pointerCancelHandler);
+    }
+    #handlePointerEnd(event, isUp) {
+        if (event.pointerId !== this.#activePagerPointerId) {
+            const rejected = this.#rejectedPagerPointers.get(event.pointerId);
+            if (rejected) {
+                if (!isUp) {
+                    this.#rejectedPagerPointers.delete(event.pointerId);
+                }
+                else {
+                    const isWithinControl = this.#isPointerReleaseWithinControl(event, rejected.control ?? null);
+                    if (isWithinControl) {
+                        rejected.phase = "awaiting-click";
+                    }
+                    else {
+                        this.#rejectedPagerPointers.delete(event.pointerId);
+                    }
+                }
+            }
+            this.#cleanupDocumentPointerListenersIfNeeded();
+            return;
+        }
         this.#scroll$.next();
-        this.#scroll$.complete();
-        this.#scroll$ = new Subject();
+        const shouldSuppressTrailingClick = isUp &&
+            this.#continuousTicked &&
+            this.#isPointerReleaseWithinControl(event, this.#activePagerPointerControl);
+        if (shouldSuppressTrailingClick) {
+            this.#suppressedPagerClickPointerIds.add(event.pointerId);
+        }
+        else {
+            this.#suppressedPagerClickPointerIds.delete(event.pointerId);
+        }
+        this.#continuousTicked = false;
+        this.#activePagerPointerId = null;
+        this.#activePagerPointerControl = null;
+        this.#cleanupDocumentPointerListenersIfNeeded();
+    }
+    #isPointerReleaseWithinControl(event, control) {
+        if (control == null) {
+            return true;
+        }
+        const targetNode = event.target;
+        return ((targetNode != null && control.contains(targetNode)) ||
+            (typeof event.composedPath === "function" && event.composedPath().includes(control)));
+    }
+    #releasePagerPointerCapture(control, pointerId) {
+        if (control == null ||
+            typeof control.hasPointerCapture !== "function" ||
+            typeof control.releasePointerCapture !== "function") {
+            return;
+        }
+        try {
+            if (control.hasPointerCapture(pointerId)) {
+                control.releasePointerCapture(pointerId);
+            }
+        }
+        catch {
+            // Do not let an implementation-specific capture race break pager interaction.
+        }
+    }
+    #resetPagerScrollState() {
+        if (this.#pagerScrollCompletionCleanup) {
+            this.#pagerScrollCompletionCleanup();
+            this.#pagerScrollCompletionCleanup = null;
+        }
+        this.#pagerScrollContext = null;
+    }
+    #scrollPagerBy(element, direction) {
+        const currentDirection = this.isRtl() ? "rtl" : "ltr";
+        const maxScroll = Math.max(0, (element.scrollWidth ?? 0) - (element.clientWidth ?? 0));
+        const sameContext = this.#pagerScrollContext?.element === element &&
+            this.#pagerScrollContext.direction === currentDirection &&
+            this.#pagerScrollContext.maxScroll === maxScroll;
+        const currentScrollLeft = element.scrollLeft ?? 0;
+        const base = sameContext ? this.#pagerScrollContext.target : currentScrollLeft;
+        let offset = direction === "left" ? -100 : 100;
+        if (currentDirection === "rtl") {
+            offset = -offset;
+        }
+        const target = base + offset;
+        const clampedTarget = currentDirection === "ltr"
+            ? Math.max(0, Math.min(maxScroll, target))
+            : Math.max(-maxScroll, Math.min(0, target));
+        if (!sameContext && clampedTarget === currentScrollLeft) {
+            this.#resetPagerScrollState();
+            return;
+        }
+        if (sameContext && clampedTarget === this.#pagerScrollContext.target) {
+            return;
+        }
+        this.#pagerScrollContext = {
+            direction: currentDirection,
+            element,
+            maxScroll,
+            target: clampedTarget
+        };
+        if (typeof element.scrollTo === "function") {
+            element.scrollTo({ behavior: this.scrollBehavior(), left: clampedTarget });
+        }
+        else if (typeof element.scrollBy === "function") {
+            element.scrollBy({ behavior: this.scrollBehavior(), left: offset });
+        }
+        this.#armPagerScrollCompletion(element);
+    }
+    #stopContinuousScroll() {
+        this.#document.removeEventListener("pointerup", this.#pointerUpHandler);
+        this.#document.removeEventListener("pointercancel", this.#pointerCancelHandler);
+        this.#scroll$.next();
+        this.#continuousTicked = false;
+        this.#activePagerPointerId = null;
+        this.#activePagerPointerControl = null;
+        this.#suppressedPagerClickPointerIds.clear();
+        this.#rejectedPagerPointers.clear();
+    }
+    #updatePagerArrowVisibility(list, pager) {
+        const requiredWidth = list.scrollWidth;
+        const arrowFreeAvailableWidth = pager.clientWidth;
+        this.pagerArrowVisible.set(requiredWidth > arrowFreeAvailableWidth);
     }
     navigate(direction, infinite) {
         if (direction === "left") {
@@ -392,8 +727,8 @@ class ScrollViewComponent {
         this.scrollActivePageIntoView();
     }
     navigateLeft(infinite) {
-        const currentIndex = this.index();
-        const dataLength = this.viewData().length;
+        const currentIndex = this.#viewIndex();
+        const dataLength = this.itemCount();
         if (dataLength === 0) {
             return;
         }
@@ -405,8 +740,8 @@ class ScrollViewComponent {
         }
     }
     navigateRight(infinite) {
-        const currentIndex = this.index();
-        const dataLength = this.viewData().length;
+        const currentIndex = this.#viewIndex();
+        const dataLength = this.itemCount();
         if (dataLength === 0) {
             return;
         }
@@ -418,36 +753,31 @@ class ScrollViewComponent {
         }
     }
     scrollActivePageIntoView() {
+        this.#resetPagerScrollState();
         asyncScheduler.schedule(() => {
             const element = this.#hostElementRef.nativeElement.querySelector("button[data-active-page='true']");
             if (element) {
-                element.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+                element.scrollIntoView({ behavior: this.scrollBehavior(), block: "nearest", inline: "center" });
             }
         });
     }
-    setPagerListResizeObserver() {
-        const pagerListElementRef = this.pagerListElementRef();
-        if (pagerListElementRef) {
-            const element = pagerListElementRef.nativeElement;
-            this.pagerArrowVisible.set(element.scrollWidth > element.clientWidth);
-            this.#resizeObserver = new ResizeObserver(() => {
-                const scrollWidth = element.scrollWidth;
-                const clientWidth = element.clientWidth;
-                this.pagerArrowVisible.set(scrollWidth > clientWidth);
-            });
-            this.#resizeObserver.observe(element);
-        }
-    }
     setSubscriptions() {
         fromEvent(this.#hostElementRef.nativeElement, "keydown")
             .pipe(takeUntilDestroyed(this.#destroyRef), filter(event => event.key === "ArrowLeft" || event.key === "ArrowRight"), tap(event => {
-            const direction = event.key === "ArrowLeft" ? "left" : "right";
+            const isRtl = this.isRtl();
+            let direction;
+            if (event.key === "ArrowLeft") {
+                direction = isRtl ? "right" : "left";
+            }
+            else {
+                direction = isRtl ? "left" : "right";
+            }
             this.navigate(direction, this.infinite());
         }))
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ScrollViewComponent, isStandalone: true, selector: "mona-scroll-view", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, arrows: { classPropertyName: "arrows", publicName: "arrows", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, infinite: { classPropertyName: "infinite", publicName: "infinite", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, pagerBlur: { classPropertyName: "pagerBlur", publicName: "pagerBlur", isSignal: true, isRequired: false, transformFunction: null }, pagerOverlay: { classPropertyName: "pagerOverlay", publicName: "pagerOverlay", isSignal: true, isRequired: false, transformFunction: null }, pagerRounded: { classPropertyName: "pagerRounded", publicName: "pagerRounded", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { index: "indexChange" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "0", "style.height": "scrollViewHeight()", "style.width": "scrollViewWidth()", "attr.role": "'region'", "attr.aria-roledescription": "'carousel'", "attr.aria-label": "ariaLabel()" } }, queries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "pagerListElementRef", first: true, predicate: ["pagerListElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"contentClass()\" #contentElement>\n    <ul [class]=\"listClass()\">\n        @for (item of viewData(); track $index) {\n            @if ($index === viewIndex()) {\n                <li\n                    role=\"group\"\n                    aria-roledescription=\"slide\"\n                    [attr.aria-label]=\"$index + 1 + ' of ' + itemCount()\"\n                    [animate.enter]=\"enterAnimation()\"\n                    [animate.leave]=\"leaveAnimation()\"\n                    [style.animation-duration.ms]=\"animationDuration()\">\n                    @let width = contentElement.clientWidth;\n                    @let height = contentElement.clientHeight;\n                    <ng-container\n                        [ngTemplateOutlet]=\"contentTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item.data, width, height }\"></ng-container>\n                </li>\n            }\n        }\n    </ul>\n</div>\n<button\n    type=\"button\"\n    [class]=\"leftArrowClass()\"\n    (click)=\"onArrowClick('left')\"\n    [attr.data-navigate-prev]=\"true\"\n    aria-label=\"Previous page\">\n    <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"48\"\n        height=\"48\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-chevron-left-icon lucide-chevron-left\">\n        <path d=\"m15 18-6-6 6-6\" />\n    </svg>\n</button>\n<button\n    type=\"button\"\n    [class]=\"rightArrowClass()\"\n    (click)=\"onArrowClick('right')\"\n    [attr.data-navigate-next]=\"true\"\n    aria-label=\"Next page\">\n    <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"48\"\n        height=\"48\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-chevron-right-icon lucide-chevron-right\">\n        <path d=\"m9 18 6-6-6-6\" />\n    </svg>\n</button>\n\n@if (pageable()) {\n    <div [class]=\"pagerClass()\" [style.backdrop-filter]=\"'blur(' + pagerBlur() + 'px)'\">\n        @if (pagerArrowVisible()) {\n            <button\n                type=\"button\"\n                [class]=\"pagerArrowClass()\"\n                aria-label=\"Scroll pager left\"\n                (click)=\"onPagerScroll(pagerListElement, 'left', 'single')\"\n                (mousedown)=\"onPagerScroll(pagerListElement, 'left', 'continuous')\">\n                <svg\n                    aria-hidden=\"true\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"24\"\n                    height=\"24\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    class=\"lucide lucide-chevron-left-icon lucide-chevron-left\">\n                    <path d=\"m15 18-6-6 6-6\" />\n                </svg>\n            </button>\n        }\n        <div [class]=\"pagerListContainerClass()\">\n            <ul [class]=\"pagerListClass()\" #pagerListElement>\n                @for (_ of viewData(); track $index) {\n                    <li [attr.data-page-index]=\"$index\" [attr.data-page-item]=\"true\">\n                        <button\n                            type=\"button\"\n                            monaScrollViewActivePage\n                            [active]=\"$index === viewIndex()\"\n                            [rounded]=\"pagerRounded()\"\n                            [attr.data-active-page]=\"$index === viewIndex()\"\n                            [attr.aria-current]=\"$index === viewIndex() ? true : null\"\n                            [attr.aria-label]=\"'Page ' + ($index + 1)\"\n                            (click)=\"onPageClick($index, pagerItemElement)\"\n                            #pagerItemElement></button>\n                    </li>\n                }\n            </ul>\n        </div>\n        @if (pagerArrowVisible()) {\n            <button\n                type=\"button\"\n                [class]=\"pagerArrowClass()\"\n                aria-label=\"Scroll pager right\"\n                (click)=\"onPagerScroll(pagerListElement, 'right', 'single')\"\n                (mousedown)=\"onPagerScroll(pagerListElement, 'right', 'continuous')\">\n                <svg\n                    aria-hidden=\"true\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"24\"\n                    height=\"24\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    class=\"lucide lucide-chevron-right-icon lucide-chevron-right\">\n                    <path d=\"m9 18 6-6-6-6\" />\n                </svg>\n            </button>\n        }\n    </div>\n}\n", styles: ["@keyframes slideInFromRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutToLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes slideInFromLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutToRight{0%{transform:translate(0)}to{transform:translate(100%)}}.slide-in-from-right{animation:slideInFromRight .5s ease-out both}.slide-out-to-left{animation:slideOutToLeft .5s ease-out both}.slide-in-from-left{animation:slideInFromLeft .5s ease-out both}.slide-out-to-right{animation:slideOutToRight .5s ease-out both}@media(prefers-reduced-motion:reduce){.slide-in-from-right,.slide-out-to-left,.slide-in-from-left,.slide-out-to-right{animation-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ScrollViewActivePageDirective, selector: "button[monaScrollViewActivePage]", inputs: ["active", "rounded"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ScrollViewComponent, isStandalone: true, selector: "mona-scroll-view", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, arrows: { classPropertyName: "arrows", publicName: "arrows", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, infinite: { classPropertyName: "infinite", publicName: "infinite", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, pagerBlur: { classPropertyName: "pagerBlur", publicName: "pagerBlur", isSignal: true, isRequired: false, transformFunction: null }, pagerOverlay: { classPropertyName: "pagerOverlay", publicName: "pagerOverlay", isSignal: true, isRequired: false, transformFunction: null }, pagerRounded: { classPropertyName: "pagerRounded", publicName: "pagerRounded", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { index: "indexChange" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "0", "style.height": "scrollViewHeight()", "style.width": "scrollViewWidth()", "attr.role": "'region'", "attr.aria-roledescription": "messages().carousel", "attr.aria-label": "ariaLabel()" } }, queries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "pagerElementRef", first: true, predicate: ["pagerElement"], descendants: true, isSignal: true }, { propertyName: "pagerListElementRef", first: true, predicate: ["pagerListElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"contentClass()\" #contentElement>\n    <ul [class]=\"listClass()\">\n        @for (item of viewData(); track $index) {\n            @if ($index === viewIndex()) {\n                <li\n                    role=\"group\"\n                    [attr.aria-roledescription]=\"messages().slide\"\n                    [attr.aria-label]=\"messages().pageOf($index + 1, itemCount())\"\n                    [animate.enter]=\"enterAnimation()\"\n                    [animate.leave]=\"leaveAnimation()\"\n                    [style.--mona-scroll-view-animation-duration]=\"animationDuration() + 'ms'\">\n                    @let width = contentElement.clientWidth;\n                    @let height = contentElement.clientHeight;\n                    <ng-container\n                        [ngTemplateOutlet]=\"contentTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item.data, width, height }\"></ng-container>\n                </li>\n            }\n        }\n    </ul>\n</div>\n<button\n    type=\"button\"\n    [class]=\"leftArrowClass()\"\n    (click)=\"onArrowClick('left')\"\n    [attr.data-navigate-prev]=\"true\"\n    [attr.aria-label]=\"messages().previousPage\">\n    <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"48\"\n        height=\"48\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-chevron-left-icon lucide-chevron-left rtl:rotate-180\">\n        <path d=\"m15 18-6-6 6-6\" />\n    </svg>\n</button>\n<button\n    type=\"button\"\n    [class]=\"rightArrowClass()\"\n    (click)=\"onArrowClick('right')\"\n    [attr.data-navigate-next]=\"true\"\n    [attr.aria-label]=\"messages().nextPage\">\n    <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"48\"\n        height=\"48\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-chevron-right-icon lucide-chevron-right rtl:rotate-180\">\n        <path d=\"m9 18 6-6-6-6\" />\n    </svg>\n</button>\n\n@if (pageable()) {\n    <div\n        #pagerElement\n        data-pager-root=\"true\"\n        [class]=\"pagerClass()\"\n        [style.direction]=\"isRtl() ? 'rtl' : 'ltr'\"\n        [style.backdrop-filter]=\"'blur(' + pagerBlur() + 'px)'\">\n        @if (pagerArrowVisible()) {\n            <button\n                type=\"button\"\n                [class]=\"pagerArrowClass()\"\n                [attr.aria-label]=\"messages().scrollPagerPrevious\"\n                (pointerdown)=\"onPagerPointerDown($event, pagerListElement, 'left')\"\n                (click)=\"onPagerClick($event, pagerListElement, 'left')\">\n                <svg\n                    aria-hidden=\"true\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"24\"\n                    height=\"24\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    class=\"lucide lucide-chevron-left-icon lucide-chevron-left rtl:rotate-180\">\n                    <path d=\"m15 18-6-6 6-6\" />\n                </svg>\n            </button>\n        }\n        <div [class]=\"pagerListContainerClass()\">\n            <ul [class]=\"pagerListClass()\" #pagerListElement>\n                @for (_ of viewData(); track $index) {\n                    <li [attr.data-page-index]=\"$index\" [attr.data-page-item]=\"true\">\n                        <button\n                            type=\"button\"\n                            monaScrollViewActivePage\n                            [active]=\"$index === viewIndex()\"\n                            [rounded]=\"pagerRounded()\"\n                            [attr.data-active-page]=\"$index === viewIndex()\"\n                            [attr.aria-current]=\"$index === viewIndex() ? true : null\"\n                            [attr.aria-label]=\"messages().page($index + 1)\"\n                            (click)=\"onPageClick($index, pagerItemElement)\"\n                            #pagerItemElement></button>\n                    </li>\n                }\n            </ul>\n        </div>\n        @if (pagerArrowVisible()) {\n            <button\n                type=\"button\"\n                [class]=\"pagerArrowClass()\"\n                [attr.aria-label]=\"messages().scrollPagerNext\"\n                (pointerdown)=\"onPagerPointerDown($event, pagerListElement, 'right')\"\n                (click)=\"onPagerClick($event, pagerListElement, 'right')\">\n                <svg\n                    aria-hidden=\"true\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"24\"\n                    height=\"24\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    class=\"lucide lucide-chevron-right-icon lucide-chevron-right rtl:rotate-180\">\n                    <path d=\"m9 18 6-6-6-6\" />\n                </svg>\n            </button>\n        }\n    </div>\n}\n", styles: ["@keyframes slideInFromRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutToLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes slideInFromLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutToRight{0%{transform:translate(0)}to{transform:translate(100%)}}.slide-in-from-right,.slide-out-to-left,.slide-in-from-left,.slide-out-to-right{animation-duration:var(--mona-scroll-view-animation-duration, .5s);animation-timing-function:ease-out;animation-fill-mode:both}.slide-in-from-right{animation-name:slideInFromRight}.slide-out-to-left{animation-name:slideOutToLeft}.slide-in-from-left{animation-name:slideInFromLeft}.slide-out-to-right{animation-name:slideOutToRight}@media(prefers-reduced-motion:reduce){.slide-in-from-right,.slide-out-to-left,.slide-in-from-left,.slide-out-to-right{animation-duration:min(var(--mona-scroll-view-animation-duration, .5s),1ms)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ScrollViewActivePageDirective, selector: "button[monaScrollViewActivePage]", inputs: ["active", "rounded"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollViewComponent, decorators: [{
             type: Component,
@@ -457,10 +787,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[style.height]": "scrollViewHeight()",
                         "[style.width]": "scrollViewWidth()",
                         "[attr.role]": "'region'",
-                        "[attr.aria-roledescription]": "'carousel'",
+                        "[attr.aria-roledescription]": "messages().carousel",
                         "[attr.aria-label]": "ariaLabel()"
-                    }, template: "<div [class]=\"contentClass()\" #contentElement>\n    <ul [class]=\"listClass()\">\n        @for (item of viewData(); track $index) {\n            @if ($index === viewIndex()) {\n                <li\n                    role=\"group\"\n                    aria-roledescription=\"slide\"\n                    [attr.aria-label]=\"$index + 1 + ' of ' + itemCount()\"\n                    [animate.enter]=\"enterAnimation()\"\n                    [animate.leave]=\"leaveAnimation()\"\n                    [style.animation-duration.ms]=\"animationDuration()\">\n                    @let width = contentElement.clientWidth;\n                    @let height = contentElement.clientHeight;\n                    <ng-container\n                        [ngTemplateOutlet]=\"contentTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item.data, width, height }\"></ng-container>\n                </li>\n            }\n        }\n    </ul>\n</div>\n<button\n    type=\"button\"\n    [class]=\"leftArrowClass()\"\n    (click)=\"onArrowClick('left')\"\n    [attr.data-navigate-prev]=\"true\"\n    aria-label=\"Previous page\">\n    <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"48\"\n        height=\"48\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-chevron-left-icon lucide-chevron-left\">\n        <path d=\"m15 18-6-6 6-6\" />\n    </svg>\n</button>\n<button\n    type=\"button\"\n    [class]=\"rightArrowClass()\"\n    (click)=\"onArrowClick('right')\"\n    [attr.data-navigate-next]=\"true\"\n    aria-label=\"Next page\">\n    <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"48\"\n        height=\"48\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-chevron-right-icon lucide-chevron-right\">\n        <path d=\"m9 18 6-6-6-6\" />\n    </svg>\n</button>\n\n@if (pageable()) {\n    <div [class]=\"pagerClass()\" [style.backdrop-filter]=\"'blur(' + pagerBlur() + 'px)'\">\n        @if (pagerArrowVisible()) {\n            <button\n                type=\"button\"\n                [class]=\"pagerArrowClass()\"\n                aria-label=\"Scroll pager left\"\n                (click)=\"onPagerScroll(pagerListElement, 'left', 'single')\"\n                (mousedown)=\"onPagerScroll(pagerListElement, 'left', 'continuous')\">\n                <svg\n                    aria-hidden=\"true\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"24\"\n                    height=\"24\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    class=\"lucide lucide-chevron-left-icon lucide-chevron-left\">\n                    <path d=\"m15 18-6-6 6-6\" />\n                </svg>\n            </button>\n        }\n        <div [class]=\"pagerListContainerClass()\">\n            <ul [class]=\"pagerListClass()\" #pagerListElement>\n                @for (_ of viewData(); track $index) {\n                    <li [attr.data-page-index]=\"$index\" [attr.data-page-item]=\"true\">\n                        <button\n                            type=\"button\"\n                            monaScrollViewActivePage\n                            [active]=\"$index === viewIndex()\"\n                            [rounded]=\"pagerRounded()\"\n                            [attr.data-active-page]=\"$index === viewIndex()\"\n                            [attr.aria-current]=\"$index === viewIndex() ? true : null\"\n                            [attr.aria-label]=\"'Page ' + ($index + 1)\"\n                            (click)=\"onPageClick($index, pagerItemElement)\"\n                            #pagerItemElement></button>\n                    </li>\n                }\n            </ul>\n        </div>\n        @if (pagerArrowVisible()) {\n            <button\n                type=\"button\"\n                [class]=\"pagerArrowClass()\"\n                aria-label=\"Scroll pager right\"\n                (click)=\"onPagerScroll(pagerListElement, 'right', 'single')\"\n                (mousedown)=\"onPagerScroll(pagerListElement, 'right', 'continuous')\">\n                <svg\n                    aria-hidden=\"true\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"24\"\n                    height=\"24\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    class=\"lucide lucide-chevron-right-icon lucide-chevron-right\">\n                    <path d=\"m9 18 6-6-6-6\" />\n                </svg>\n            </button>\n        }\n    </div>\n}\n", styles: ["@keyframes slideInFromRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutToLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes slideInFromLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutToRight{0%{transform:translate(0)}to{transform:translate(100%)}}.slide-in-from-right{animation:slideInFromRight .5s ease-out both}.slide-out-to-left{animation:slideOutToLeft .5s ease-out both}.slide-in-from-left{animation:slideInFromLeft .5s ease-out both}.slide-out-to-right{animation:slideOutToRight .5s ease-out both}@media(prefers-reduced-motion:reduce){.slide-in-from-right,.slide-out-to-left,.slide-in-from-left,.slide-out-to-right{animation-duration:1ms}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { contentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], pagerListElementRef: [{ type: i0.ViewChild, args: ["pagerListElement", { isSignal: true }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], arrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrows", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }, { type: i0.Output, args: ["indexChange"] }], infinite: [{ type: i0.Input, args: [{ isSignal: true, alias: "infinite", required: false }] }], pageable: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageable", required: false }] }], pagerBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagerBlur", required: false }] }], pagerOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagerOverlay", required: false }] }], pagerRounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagerRounded", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: true }] }] } });
+                    }, template: "<div [class]=\"contentClass()\" #contentElement>\n    <ul [class]=\"listClass()\">\n        @for (item of viewData(); track $index) {\n            @if ($index === viewIndex()) {\n                <li\n                    role=\"group\"\n                    [attr.aria-roledescription]=\"messages().slide\"\n                    [attr.aria-label]=\"messages().pageOf($index + 1, itemCount())\"\n                    [animate.enter]=\"enterAnimation()\"\n                    [animate.leave]=\"leaveAnimation()\"\n                    [style.--mona-scroll-view-animation-duration]=\"animationDuration() + 'ms'\">\n                    @let width = contentElement.clientWidth;\n                    @let height = contentElement.clientHeight;\n                    <ng-container\n                        [ngTemplateOutlet]=\"contentTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item.data, width, height }\"></ng-container>\n                </li>\n            }\n        }\n    </ul>\n</div>\n<button\n    type=\"button\"\n    [class]=\"leftArrowClass()\"\n    (click)=\"onArrowClick('left')\"\n    [attr.data-navigate-prev]=\"true\"\n    [attr.aria-label]=\"messages().previousPage\">\n    <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"48\"\n        height=\"48\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-chevron-left-icon lucide-chevron-left rtl:rotate-180\">\n        <path d=\"m15 18-6-6 6-6\" />\n    </svg>\n</button>\n<button\n    type=\"button\"\n    [class]=\"rightArrowClass()\"\n    (click)=\"onArrowClick('right')\"\n    [attr.data-navigate-next]=\"true\"\n    [attr.aria-label]=\"messages().nextPage\">\n    <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"48\"\n        height=\"48\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-chevron-right-icon lucide-chevron-right rtl:rotate-180\">\n        <path d=\"m9 18 6-6-6-6\" />\n    </svg>\n</button>\n\n@if (pageable()) {\n    <div\n        #pagerElement\n        data-pager-root=\"true\"\n        [class]=\"pagerClass()\"\n        [style.direction]=\"isRtl() ? 'rtl' : 'ltr'\"\n        [style.backdrop-filter]=\"'blur(' + pagerBlur() + 'px)'\">\n        @if (pagerArrowVisible()) {\n            <button\n                type=\"button\"\n                [class]=\"pagerArrowClass()\"\n                [attr.aria-label]=\"messages().scrollPagerPrevious\"\n                (pointerdown)=\"onPagerPointerDown($event, pagerListElement, 'left')\"\n                (click)=\"onPagerClick($event, pagerListElement, 'left')\">\n                <svg\n                    aria-hidden=\"true\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"24\"\n                    height=\"24\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    class=\"lucide lucide-chevron-left-icon lucide-chevron-left rtl:rotate-180\">\n                    <path d=\"m15 18-6-6 6-6\" />\n                </svg>\n            </button>\n        }\n        <div [class]=\"pagerListContainerClass()\">\n            <ul [class]=\"pagerListClass()\" #pagerListElement>\n                @for (_ of viewData(); track $index) {\n                    <li [attr.data-page-index]=\"$index\" [attr.data-page-item]=\"true\">\n                        <button\n                            type=\"button\"\n                            monaScrollViewActivePage\n                            [active]=\"$index === viewIndex()\"\n                            [rounded]=\"pagerRounded()\"\n                            [attr.data-active-page]=\"$index === viewIndex()\"\n                            [attr.aria-current]=\"$index === viewIndex() ? true : null\"\n                            [attr.aria-label]=\"messages().page($index + 1)\"\n                            (click)=\"onPageClick($index, pagerItemElement)\"\n                            #pagerItemElement></button>\n                    </li>\n                }\n            </ul>\n        </div>\n        @if (pagerArrowVisible()) {\n            <button\n                type=\"button\"\n                [class]=\"pagerArrowClass()\"\n                [attr.aria-label]=\"messages().scrollPagerNext\"\n                (pointerdown)=\"onPagerPointerDown($event, pagerListElement, 'right')\"\n                (click)=\"onPagerClick($event, pagerListElement, 'right')\">\n                <svg\n                    aria-hidden=\"true\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"24\"\n                    height=\"24\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    class=\"lucide lucide-chevron-right-icon lucide-chevron-right rtl:rotate-180\">\n                    <path d=\"m9 18 6-6-6-6\" />\n                </svg>\n            </button>\n        }\n    </div>\n}\n", styles: ["@keyframes slideInFromRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutToLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes slideInFromLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutToRight{0%{transform:translate(0)}to{transform:translate(100%)}}.slide-in-from-right,.slide-out-to-left,.slide-in-from-left,.slide-out-to-right{animation-duration:var(--mona-scroll-view-animation-duration, .5s);animation-timing-function:ease-out;animation-fill-mode:both}.slide-in-from-right{animation-name:slideInFromRight}.slide-out-to-left{animation-name:slideOutToLeft}.slide-in-from-left{animation-name:slideInFromLeft}.slide-out-to-right{animation-name:slideOutToRight}@media(prefers-reduced-motion:reduce){.slide-in-from-right,.slide-out-to-left,.slide-in-from-left,.slide-out-to-right{animation-duration:min(var(--mona-scroll-view-animation-duration, .5s),1ms)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { contentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], pagerElementRef: [{ type: i0.ViewChild, args: ["pagerElement", { isSignal: true }] }], pagerListElementRef: [{ type: i0.ViewChild, args: ["pagerListElement", { isSignal: true }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], arrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrows", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }, { type: i0.Output, args: ["indexChange"] }], infinite: [{ type: i0.Input, args: [{ isSignal: true, alias: "infinite", required: false }] }], pageable: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageable", required: false }] }], pagerBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagerBlur", required: false }] }], pagerOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagerOverlay", required: false }] }], pagerRounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagerRounded", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: true }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/scroll-view
@@ -470,5 +800,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ScrollViewActivePageDirective, ScrollViewComponent };
+export { SCROLL_VIEW_DEFAULT_MESSAGES, ScrollViewActivePageDirective, ScrollViewComponent };
 //# sourceMappingURL=nanahoshi-mona-ui-scroll-view.mjs.map