@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,565 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, computed, input, Directive, DestroyRef, DOCUMENT, ElementRef, contentChild, TemplateRef, signal, viewChild, model, afterNextRender, Component } from '@angular/core';
+import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toCssValue } from '@nanahoshi/mona-ui/internal';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { select } from '@mirei/ts-collections';
+import { startWith, pairwise, map, Subject, timer, interval, takeUntil, asyncScheduler, fromEvent, filter, tap } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+const scrollViewBaseVariants = cva(`
+        block relative w-full h-full outline-none
+        overflow-hidden
+        border border-border border-2
+    `, {
+    variants: {
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            none: "rounded-none"
+        }
+    }
+});
+const scrollViewContentVariants = cva(`
+        absolute inset-0 overflow-hidden
+    `);
+const scrollViewListVariants = cva(`
+        relative list-none h-full
+        [&_li]:absolute
+        [&_li]:inset-0
+        [&_li]:outline-none
+    `);
+const scrollViewArrowVariants = cva(`
+        absolute top-0 bottom-0 px-1
+        flex items-center justify-center
+        cursor-pointer select-none
+
+        text-foreground
+        [&_svg]:stroke-white
+        [&_svg]:drop-shadow-[0_0_15px_#000]
+        [&_svg]:opacity-40
+        hover:[&_svg]:opacity-100
+        [&_svg]:transition-opacity duration-300 ease-out
+    `, {
+    variants: {
+        hidden: {
+            true: "hidden",
+            false: ""
+        },
+        left: {
+            true: "left-0",
+            false: ""
+        },
+        right: {
+            true: "right-0",
+            false: ""
+        }
+    }
+});
+const scrollViewPagerVariants = cva(`
+        absolute left-0 right-0 bottom-0 flex items-center justify-center
+    `, {
+    variants: {
+        pagerOverlay: {
+            dark: "border-0 border-t border-border/20 bg-background-dark/20",
+            light: "border-0 border-t border-border/20 bg-background/20",
+            none: ""
+        }
+    }
+});
+const scrollViewPagerListContainerVariants = cva(`
+        flex items-center justify-center
+        flex-1 overflow-hidden
+    `);
+const scrollViewPagerListVariants = cva(`
+        flex items-center gap-2
+        list-none overflow-hidden
+        flex-nowrap px-1 py-3
+    `);
+const scrollViewPagerListItemVariants = cva(`
+        w-3 h-3
+        content-[' ']
+        flex-grow-0 flex-shrink-0 flex-basis-3
+        cursor-pointer
+        border border-border bg-white
+        not-last:mr-3
+    `, {
+    variants: {
+        active: {
+            true: "!bg-primary",
+            false: ""
+        },
+        pagerRounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full",
+            none: "rounded-none"
+        }
+    }
+});
+const scrollViewPagerArrowVariants = cva(`
+        flex items-center justify-center
+        p-2 cursor-pointer select-none
+        transition-opacity duration-300 ease-out
+        opacity-70 hover:opacity-100
+        font-medium
+        [&_svg]:stroke-white
+        [&_svg]:drop-shadow-[0_0_15px_#000]
+        [&_svg]:opacity-40
+        hover:[&_svg]:opacity-100
+        [&_svg]:transition-opacity duration-300 ease-out
+    `);
+
+const scrollViewBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return scrollViewBaseVariants;
+        default:
+            return scrollViewBaseVariants;
+    }
+};
+const scrollViewContentThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return scrollViewContentVariants;
+        default:
+            return scrollViewContentVariants;
+    }
+};
+const scrollViewListThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return scrollViewListVariants;
+        default:
+            return scrollViewListVariants;
+    }
+};
+const scrollViewArrowThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return scrollViewArrowVariants;
+        default:
+            return scrollViewArrowVariants;
+    }
+};
+const scrollViewPagerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return scrollViewPagerVariants;
+        default:
+            return scrollViewPagerVariants;
+    }
+};
+const scrollViewPagerListContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return scrollViewPagerListContainerVariants;
+        default:
+            return scrollViewPagerListContainerVariants;
+    }
+};
+const scrollViewPagerListThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return scrollViewPagerListVariants;
+        default:
+            return scrollViewPagerListVariants;
+    }
+};
+const scrollViewPagerListItemThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return scrollViewPagerListItemVariants;
+        default:
+            return scrollViewPagerListItemVariants;
+    }
+};
+const scrollViewPagerArrowThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return scrollViewPagerArrowVariants;
+        default:
+            return scrollViewPagerArrowVariants;
+    }
+};
+
+class ScrollViewActivePageDirective {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.pageItemClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const active = this.active();
+            const pagerRounded = this.rounded();
+            return scrollViewPagerListItemThemeVariants(theme)({ active, pagerRounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageItemClass" }] : /* istanbul ignore next */ []));
+        this.active = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.rounded = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollViewActivePageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ScrollViewActivePageDirective, isStandalone: true, selector: "button[monaScrollViewActivePage]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "pageItemClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollViewActivePageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "button[monaScrollViewActivePage]",
+                    host: {
+                        "[class]": "pageItemClass()"
+                    }
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }] } });
+
+class ScrollViewComponent {
+    #destroyRef;
+    #document;
+    #viewIndex;
+    #directionFromIndex;
+    #hostElementRef;
+    #themeService;
+    #resizeObserver;
+    #scroll$;
+    #scrollMouseUpHandler;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#document = inject(DOCUMENT);
+        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;
+        }, /* @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.#themeService = inject(ThemeService);
+        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.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const variantClass = scrollViewBaseThemeVariants(theme)({ rounded });
+            const userClass = this.userClass();
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.contentClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return scrollViewContentThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
+        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";
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enterAnimation" }] : /* 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";
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leaveAnimation" }] : /* istanbul ignore next */ []));
+        this.leftArrowClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const hidden = !this.arrows() || !(this.infinite() || this.index() !== 0);
+            return scrollViewArrowThemeVariants(theme)({ left: true, hidden });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leftArrowClass" }] : /* istanbul ignore next */ []));
+        this.listClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return scrollViewListThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+        this.pagerArrowClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return scrollViewPagerArrowThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerArrowClass" }] : /* istanbul ignore next */ []));
+        this.pagerArrowVisible = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerArrowVisible" }] : /* istanbul ignore next */ []));
+        this.pagerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const pagerOverlay = this.pagerOverlay();
+            return scrollViewPagerThemeVariants(theme)({ pagerOverlay });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerClass" }] : /* istanbul ignore next */ []));
+        this.pagerListClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return scrollViewPagerListThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerListClass" }] : /* istanbul ignore next */ []));
+        this.pagerListContainerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return scrollViewPagerListContainerThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerListContainerClass" }] : /* istanbul ignore next */ []));
+        this.pagerListElementRef = viewChild("pagerListElement", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerListElementRef" }] : /* istanbul ignore next */ []));
+        this.rightArrowClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const hidden = !this.arrows() || !(this.infinite() || this.index() !== this.itemCount() - 1);
+            return scrollViewArrowThemeVariants(theme)({ right: true, hidden });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rightArrowClass" }] : /* istanbul ignore next */ []));
+        this.scrollViewHeight = computed(() => {
+            const height = this.height();
+            return toCssValue(height);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollViewHeight" }] : /* istanbul ignore next */ []));
+        this.scrollViewWidth = computed(() => {
+            const width = this.width();
+            return toCssValue(width);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollViewWidth" }] : /* istanbul ignore next */ []));
+        this.viewData = computed(() => {
+            const data = this.data();
+            return select(data, d => ({ data: d })).toImmutableSet();
+        }, /* @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.
+         * @default true
+         */
+        this.animate = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Represents the state of arrows' visibility or activity.
+         * @default false
+         */
+        this.arrows = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "arrows" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the data of the scroll view.
+         */
+        this.data = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the height of the scroll view.
+         * This property is required.
+         */
+        this.height = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the active page of the scroll view.
+         * @default 0
+         */
+        this.index = model(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the scroll view is infinite.
+         * @default false
+         */
+        this.infinite = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "infinite" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the pager is visible.
+         */
+        this.pageable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the background blur of the pager in pixels.
+         * @default 3
+         */
+        this.pagerBlur = input(3, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerBlur" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the color of the pager.
+         * @default "dark"
+         */
+        this.pagerOverlay = input("dark", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerOverlay" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the border radius of the pager items.
+         * @default "medium"
+         */
+        this.pagerRounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerRounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the border radius of the scroll view.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets custom CSS classes on the component host element. Merged with base classes via tailwind-merge.
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        /**
+         * @description Sets the width of the scroll view.
+         */
+        this.width = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.#destroyRef.onDestroy(() => {
+            this.#scroll$.complete();
+            this.#resizeObserver?.disconnect();
+            this.#document.removeEventListener("mouseup", this.#scrollMouseUpHandler);
+        });
+        afterNextRender(() => {
+            this.setPagerListResizeObserver();
+            this.setSubscriptions();
+            this.scrollActivePageIntoView();
+        });
+    }
+    onArrowClick(direction) {
+        this.navigate(direction, this.infinite());
+    }
+    onPageClick(index, element) {
+        this.index.set(index);
+        element.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+    }
+    onPagerScroll(element, direction, type) {
+        if (type === "continuous") {
+            this.#document.addEventListener("mouseup", this.#scrollMouseUpHandler, { once: true });
+        }
+        const timeFunction = type === "single" ? timer : interval;
+        timeFunction(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;
+            }
+        });
+    }
+    onPagerScrollEnd() {
+        this.#document.removeEventListener("mouseup", this.#scrollMouseUpHandler);
+        this.#scroll$.next();
+        this.#scroll$.complete();
+        this.#scroll$ = new Subject();
+    }
+    navigate(direction, infinite) {
+        if (direction === "left") {
+            this.navigateLeft(infinite);
+        }
+        else {
+            this.navigateRight(infinite);
+        }
+        this.scrollActivePageIntoView();
+    }
+    navigateLeft(infinite) {
+        const currentIndex = this.index();
+        const dataLength = this.viewData().length;
+        if (dataLength === 0) {
+            return;
+        }
+        if (infinite) {
+            this.index.set((currentIndex - 1 + dataLength) % dataLength);
+        }
+        else {
+            this.index.set(Math.max(0, currentIndex - 1));
+        }
+    }
+    navigateRight(infinite) {
+        const currentIndex = this.index();
+        const dataLength = this.viewData().length;
+        if (dataLength === 0) {
+            return;
+        }
+        if (infinite) {
+            this.index.set((currentIndex + 1) % dataLength);
+        }
+        else {
+            this.index.set(Math.min(dataLength - 1, currentIndex + 1));
+        }
+    }
+    scrollActivePageIntoView() {
+        asyncScheduler.schedule(() => {
+            const element = this.#hostElementRef.nativeElement.querySelector("button[data-active-page='true']");
+            if (element) {
+                element.scrollIntoView({ behavior: "smooth", 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";
+            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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-scroll-view", imports: [NgTemplateOutlet, ScrollViewActivePageDirective], host: {
+                        "[class]": "baseClass()",
+                        "[attr.tabindex]": "0",
+                        "[style.height]": "scrollViewHeight()",
+                        "[style.width]": "scrollViewWidth()",
+                        "[attr.role]": "'region'",
+                        "[attr.aria-roledescription]": "'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 }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/scroll-view
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ScrollViewActivePageDirective, ScrollViewComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-scroll-view.mjs.map