@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -1,18 +1,18 @@
 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 { computed, input, Directive, inject, 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
+const scrollViewBaseThemeVariants = cva(`
+        relative block h-full w-full overflow-hidden
+        bg-surface outline-none
+        border border-border-subtle
+        focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/35
     `, {
     variants: {
         rounded: {
@@ -23,26 +23,24 @@ const scrollViewBaseVariants = cva(`
         }
     }
 });
-const scrollViewContentVariants = cva(`
-        absolute inset-0 overflow-hidden
+const scrollViewContentThemeVariants = cva(`
+        absolute inset-0 overflow-hidden
     `);
-const scrollViewListVariants = cva(`
-        relative list-none h-full
-        [&_li]:absolute
-        [&_li]:inset-0
-        [&_li]:outline-none
+const scrollViewListThemeVariants = cva(`
+        relative h-full list-none
+        [&_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
+const scrollViewArrowThemeVariants = cva(`
+        absolute top-0 bottom-0 flex items-center justify-center
+        px-1
+        cursor-pointer select-none
+        bg-surface-overlay/65 text-foreground
+        transition-colors duration-(--mona-motion-standard) ease-out
+        hover:bg-hover/90 active:bg-active/90
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/35
+        [&_svg]:stroke-current
     `, {
     variants: {
         hidden: {
@@ -59,37 +57,37 @@ const scrollViewArrowVariants = cva(`
         }
     }
 });
-const scrollViewPagerVariants = cva(`
-        absolute left-0 right-0 bottom-0 flex items-center justify-center
+const scrollViewPagerThemeVariants = cva(`
+        absolute right-0 bottom-0 left-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",
+            dark: "bg-canvas/85 border-0 border-t border-border-subtle",
+            light: "bg-surface-overlay/85 border-0 border-t border-border-subtle",
             none: ""
         }
     }
 });
-const scrollViewPagerListContainerVariants = cva(`
-        flex items-center justify-center
-        flex-1 overflow-hidden
+const scrollViewPagerListContainerThemeVariants = cva(`
+        flex flex-1 items-center justify-center overflow-hidden
     `);
-const scrollViewPagerListVariants = cva(`
-        flex items-center gap-2
-        list-none overflow-hidden
-        flex-nowrap px-1 py-3
+const scrollViewPagerListThemeVariants = cva(`
+        flex flex-nowrap items-center gap-2
+        overflow-hidden list-none
+        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
+const scrollViewPagerListItemThemeVariants = cva(`
+        h-3 w-3 flex-none basis-3
+        cursor-pointer
+        bg-muted-foreground/40 border border-border-subtle
+        transition-colors
+        not-last:me-3
+        hover:bg-muted-foreground/60 active:bg-foreground
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-indicator/35
     `, {
     variants: {
         active: {
-            true: "!bg-primary",
+            true: "!bg-foreground hover:!bg-foreground",
             false: ""
         },
         pagerRounded: {
@@ -101,100 +99,23 @@ const scrollViewPagerListItemVariants = cva(`
         }
     }
 });
-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 scrollViewPagerArrowThemeVariants = cva(`
+        flex items-center justify-center
+        p-2
+        cursor-pointer select-none
+        font-medium text-muted-foreground
+        transition-colors duration-(--mona-motion-standard) ease-out
+        hover:bg-hover hover:text-foreground active:bg-active
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/35
+        [&_svg]:stroke-current
     `);
 
-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 });
+            return scrollViewPagerListItemThemeVariants({ active, pagerRounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageItemClass" }] : /* istanbul ignore next */ []));
         this.active = input.required(/* @ts-ignore */
@@ -202,7 +123,6 @@ class ScrollViewActivePageDirective {
         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 }); }
 }
@@ -222,7 +142,6 @@ class ScrollViewComponent {
     #viewIndex;
     #directionFromIndex;
     #hostElementRef;
-    #themeService;
     #resizeObserver;
     #scroll$;
     #scrollMouseUpHandler;
@@ -256,7 +175,6 @@ class ScrollViewComponent {
             initialValue: "right"
         });
         this.#hostElementRef = inject(ElementRef);
-        this.#themeService = inject(ThemeService);
         this.#resizeObserver = null;
         this.#scroll$ = new Subject();
         this.#scrollMouseUpHandler = () => this.onPagerScrollEnd();
@@ -266,16 +184,14 @@ class ScrollViewComponent {
         }, /* @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 variantClass = scrollViewBaseThemeVariants({ 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)();
+            return scrollViewContentThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
         this.contentTemplate = contentChild(TemplateRef, /* @ts-ignore */
@@ -291,45 +207,38 @@ class ScrollViewComponent {
         }, /* @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 });
+            return scrollViewArrowThemeVariants({ left: true, hidden });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "leftArrowClass" }] : /* istanbul ignore next */ []));
         this.listClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return scrollViewListThemeVariants(theme)();
+            return scrollViewListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
         this.pagerArrowClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return scrollViewPagerArrowThemeVariants(theme)();
+            return scrollViewPagerArrowThemeVariants();
         }, /* @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 });
+            return scrollViewPagerThemeVariants({ pagerOverlay });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerClass" }] : /* istanbul ignore next */ []));
         this.pagerListClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return scrollViewPagerListThemeVariants(theme)();
+            return scrollViewPagerListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerListClass" }] : /* istanbul ignore next */ []));
         this.pagerListContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return scrollViewPagerListContainerThemeVariants(theme)();
+            return scrollViewPagerListContainerThemeVariants();
         }, /* @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 });
+            return scrollViewArrowThemeVariants({ right: true, hidden });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rightArrowClass" }] : /* istanbul ignore next */ []));
         this.scrollViewHeight = computed(() => {