@blotch/dolan 22.2.3 → 22.2.5

package/dist/ui/components/chart/chart.ts

@@ -4,6 +4,7 @@ import {
   Directive,
   TemplateRef,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   contentChild,
   effect,
@@ -46,6 +47,7 @@ import type {
 } from '@tanstack/charts/types';
 
 import { cn } from '../../utils/cn';
+import { UI_THEME_COLORS } from '../icon/icon-theme';
 import { adjacentFocusPoint, createChartFocusModel } from './chart-focus';
 import {
   type ChartLabel,
@@ -131,6 +133,13 @@ export class UiChartTooltip {
   }
 }
 
+/**
+ * `UiChartTooltip`, for `contentChild()`. A call rather than the class itself:
+ * for a class, Angular's test build keeps an arrow function that nothing calls,
+ * which an app's coverage report would show as uncovered.
+ */
+const tooltipDirectiveType = () => UiChartTooltip;
+
 /** Default height, like the browser's 150px replaced-element default, but roomier. */
 const DEFAULT_HEIGHT = 200;
 /** A touch that moves less than this is a tap, not a drag. */
@@ -335,9 +344,9 @@ export class UiChart {
    * light unless the app says otherwise; see `ChartColorSchemeOption`.
    */
   readonly colorScheme = input<Exclude<ChartColorSchemeOption, Function>>();
-  readonly zoomable = input(false);
+  readonly zoomable = input(false, { transform: booleanAttribute });
   readonly zoomAxes = input<ChartZoomAxes>('xy');
-  readonly showZoomControls = input(true);
+  readonly showZoomControls = input(true, { transform: booleanAttribute });
   readonly minZoom = input(1);
   readonly maxZoom = input(8);
   /** Factor each zoom button press zooms by. */
@@ -352,10 +361,11 @@ export class UiChart {
   /** The point a tap landed on, or `null` for a tap on empty space. */
   readonly pointSelect = output<ChartPoint | null>();
 
-  protected readonly tooltipTemplate = contentChild(UiChartTooltip);
+  protected readonly tooltipTemplate = contentChild(tooltipDirectiveType());
 
   readonly #theme = inject(UI_CHART_THEME);
   readonly #appearance = inject(LynxTheme);
+  readonly #replacedColors = inject(UI_THEME_COLORS, { optional: true });
   readonly #idPrefix = `chart${nextChartId++}`;
   readonly #runtime = createChartRuntime({ defaultTheme: this.#theme.chart });
   readonly #measureText = lynxTextMeasurer();
@@ -405,6 +415,15 @@ export class UiChart {
     });
   });
 
+  /**
+   * The scene, for what the template draws inside `@if (scene())`: those
+   * bindings, and the values below derived for them, are only read while there
+   * is one, so they need no fallback for a chart without a size.
+   */
+  #drawnScene(): ChartScene<any, any, any> {
+    return this.scene()!;
+  }
+
   readonly #focusModel = computed(() => {
     const scene = this.scene();
     return scene ? createChartFocusModel(scene, this.definition()) : null;
@@ -424,24 +443,23 @@ export class UiChart {
   });
 
   /** The scene with mark states (e.g. dim the unfocused bars) resolved. */
-  readonly #presented = computed(() => {
-    const scene = this.scene();
-    return scene
-      ? resolveMarkStateScene(scene, this.#focusState(), this.#pointer()).scene
-      : null;
-  });
+  readonly #presented = computed(
+    () =>
+      resolveMarkStateScene(
+        this.#drawnScene(),
+        this.#focusState(),
+        this.#pointer(),
+      ).scene,
+  );
 
-  readonly #focusPresentation = computed(() => {
-    const scene = this.#presented();
-    return scene
-      ? resolveFocusPresentation(
-          scene,
-          this.#focusState(),
-          this.#pointer(),
-          null,
-        )
-      : { under: [], over: [] };
-  });
+  readonly #focusPresentation = computed(() =>
+    resolveFocusPresentation(
+      this.#presented(),
+      this.#focusState(),
+      this.#pointer(),
+      null,
+    ),
+  );
 
   readonly #colors = computed(() => {
     const option = this.colorScheme() ?? this.#theme.colorScheme ?? 'light';
@@ -453,16 +471,20 @@ export class UiChart {
         : typeof option === 'function'
           ? option()
           : option;
-    return scheme === 'dark' ? this.#theme.dark : this.#theme.light;
+    // Colors set at runtime above the chart, such as Android's wallpaper
+    // colors, take the place of the theme's (see UI_THEME_COLORS).
+    const replaced = this.#replacedColors?.()[scheme];
+    const colors = scheme === 'dark' ? this.#theme.dark : this.#theme.light;
+    return replaced ? { ...colors, ...replaced } : colors;
   });
 
   readonly #svgOptions = computed(() => {
-    const scene = this.scene();
+    const scene = this.#drawnScene();
     const colors = this.#colors();
     return {
-      width: scene?.width ?? 0,
-      height: scene?.height ?? 0,
-      gradients: scene?.gradients,
+      width: scene.width,
+      height: scene.height,
+      gradients: scene.gradients,
       idPrefix: this.#idPrefix,
       resolvePaint: (paint: string) => resolveChartPaint(paint, colors),
     };
@@ -475,8 +497,7 @@ export class UiChart {
   );
   protected readonly marksSvg = computed(
     () =>
-      renderChartSvg(this.#presented()?.nodes ?? [], this.#svgOptions()) ||
-      EMPTY_SVG,
+      renderChartSvg(this.#presented().nodes, this.#svgOptions()) || EMPTY_SVG,
   );
   protected readonly overSvg = computed(
     () =>
@@ -485,18 +506,14 @@ export class UiChart {
   );
 
   protected readonly layerStyle = computed(() => {
-    const scene = this.scene();
-    return `position: absolute; left: 0px; top: 0px; width: ${scene?.width ?? 0}px; height: ${scene?.height ?? 0}px;`;
+    const scene = this.#drawnScene();
+    return `position: absolute; left: 0px; top: 0px; width: ${scene.width}px; height: ${scene.height}px;`;
   });
 
   readonly #labels = computed<readonly ChartLabel[]>(() => {
     const presentation = this.#focusPresentation();
     return collectChartLabels(
-      [
-        ...presentation.under,
-        ...(this.#presented()?.nodes ?? []),
-        ...presentation.over,
-      ],
+      [...presentation.under, ...this.#presented().nodes, ...presentation.over],
       {
         defaultColor: this.#theme.chart.foreground ?? 'var(--foreground)',
         focus: this.#focusState(),
@@ -600,18 +617,21 @@ export class UiChart {
   protected readonly zoomButtonClass =
     'flex h-7 w-7 items-center justify-center rounded-md border border-border bg-card';
 
-  constructor() {
-    // A new scene (data, size or zoom changed) has new point objects. Keep the
-    // focus on the same datum when it's still there, as TanStack's hosts do.
-    effect(() => {
-      const model = this.#focusModel();
-      const previous = untracked(this.#focused);
-      if (!model || previous.length === 0) return;
-      const restored = model.restore(previous[0]!);
-      this.#focused.set(restored ? model.group(restored) : EMPTY_POINTS);
-      if (!restored) this.#pinned.set(false);
-    });
-  }
+  /**
+   * Keeps the focus on the same datum when a new scene (data, size or zoom
+   * changed) brings new point objects, as TanStack's hosts do. A field rather
+   * than a constructor: Angular's test build keeps a function for a
+   * constructor that nothing calls, which an app's coverage report would show
+   * as uncovered.
+   */
+  protected readonly restoringFocus = effect(() => {
+    const model = this.#focusModel();
+    const previous = untracked(this.#focused);
+    if (!model || previous.length === 0) return;
+    const restored = model.restore(previous[0]!);
+    this.#focused.set(restored ? model.group(restored) : EMPTY_POINTS);
+    if (!restored) this.#pinned.set(false);
+  });
 
   /**
    * ---------------------------------------------------------------------------

package/dist/ui/components/checkbox/checkbox.test.ts

@@ -1,59 +1,141 @@
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
-import { describe, expect, it, vi } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
+import {
+  type MockInstance,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
+import {
+  type LynxMainThread,
+  lynxMainThread,
+} from '../../../test-utils/lynx-main-thread';
 import { UiCheckbox } from './checkbox';
 
+@Component({
+  imports: [UiCheckbox],
+  template: `
+    <ui-checkbox
+      [(checked)]="checked"
+      [disabled]="disabled()"
+      class="mr-2"
+      (changed)="changes.push($event)"
+    />
+  `,
+})
+class CheckboxHost {
+  readonly checked = signal(false);
+  readonly disabled = signal(false);
+  readonly changes: boolean[] = [];
+}
+
+const renderCheckbox = async () => {
+  const result = await render(CheckboxHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as CheckboxHost,
+    /** The 44pt tap target around the box. */
+    target: () => result.container.querySelector('.h-11')!,
+    box: () => result.container.querySelector('.rounded-sm')!,
+    checkmark: () => result.getByText('✓'),
+  };
+};
+
+/** `__ElementAnimate`'s first argument for starting an animation. */
+const START = 0;
+/** `__ElementAnimate`'s first argument for canceling one. */
+const CANCEL = 3;
+
 describe('UiCheckbox', () => {
-  it('renders unchecked by default', async () => {
-    const { container } = await render(UiCheckbox);
-    expect(container).toBeTruthy();
+  // Watched per test: the testing library resets the main thread after each.
+  let animate: MockInstance<LynxMainThread['__ElementAnimate']>;
+  beforeEach(() => {
+    animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
   });
+  afterEach(() => animate.mockRestore());
 
-  it('toggle() flips checked and emits the `changed` output', async () => {
-    const { componentRef } = await render(UiCheckbox);
-    const inst = componentRef.instance as UiCheckbox;
-    const changes: boolean[] = [];
-    inst.changed.subscribe((v) => changes.push(v));
-
-    inst.toggle();
-    expect(inst.checked()).toBe(true);
-    inst.toggle();
-    expect(inst.checked()).toBe(false);
-    expect(changes).toEqual([true, false]);
+  it('renders an empty box with the given class', async () => {
+    const { box, checkmark } = await renderCheckbox();
+    expect(box().classList).toContain('bg-transparent');
+    expect(box().classList).toContain('mr-2');
+    expect(checkmark().getAttribute('style')).toContain('opacity: 0');
   });
 
-  it('toggle() is a no-op when disabled is true', async () => {
-    const { componentRef } = await render(UiCheckbox);
-    const inst = componentRef.instance as UiCheckbox;
-    setInputSignal(inst.disabled, true);
-    const changed = vi.fn();
-    inst.changed.subscribe(changed);
+  it('checks and unchecks on tap, emitting `changed`', async () => {
+    const { host, target, box, checkmark } = await renderCheckbox();
 
-    inst.toggle();
-    expect(inst.checked()).toBe(false);
-    expect(changed).not.toHaveBeenCalled();
+    fireEvent.tap(target());
+    await waitForUpdate();
+    expect(host.checked()).toBe(true);
+    expect(box().classList).toContain('bg-primary');
+    expect(checkmark().getAttribute('style')).toContain('opacity: 1');
+
+    fireEvent.tap(target());
+    await waitForUpdate();
+    expect(host.checked()).toBe(false);
+    expect(host.changes).toEqual([true, false]);
   });
 
-  it('applies the "checked" box class and reveals the check mark opacity', async () => {
-    const { componentRef, container } = await render(UiCheckbox);
-    const inst = componentRef.instance as UiCheckbox;
-    inst.checked.set(true);
+  it("doesn't animate on mount, then pops the checkmark in and out", async () => {
+    const { target, checkmark } = await renderCheckbox();
+    expect(animate).not.toHaveBeenCalled();
+
+    fireEvent.tap(target());
     await waitForUpdate();
+    expect(animate).toHaveBeenCalledWith(checkmark(), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'scale(0.6)', opacity: 0 },
+        { transform: 'scale(1)', opacity: 1 },
+      ],
+      expect.objectContaining({ fill: 'forwards' }),
+    ]);
 
-    // The inner check-glyph is opacity: 1 when checked (opacity: 0 otherwise).
-    const check = container.querySelector('text');
-    expect(check?.getAttribute('style')).toContain('opacity: 1');
+    // Unchecking cuts the pop-in short and pops the checkmark out.
+    fireEvent.tap(target());
+    await waitForUpdate();
+    expect(animate).toHaveBeenCalledWith(checkmark(), [
+      CANCEL,
+      expect.any(String),
+    ]);
+    expect(animate).toHaveBeenLastCalledWith(checkmark(), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'scale(1)', opacity: 1 },
+        { transform: 'scale(0.8)', opacity: 0 },
+      ],
+      expect.objectContaining({ fill: 'forwards' }),
+    ]);
+  });
+
+  it("doesn't animate two taps in one frame, which leave it as it was", async () => {
+    const { host, target } = await renderCheckbox();
+    fireEvent.tap(target());
+    fireEvent.tap(target());
+    await waitForUpdate();
+    expect(host.checked()).toBe(false);
+    expect(host.changes).toEqual([true, false]);
+    expect(animate).not.toHaveBeenCalled();
   });
 
-  it('applies the disabled dim when disabled input is set', async () => {
-    const { componentRef, container } = await render(UiCheckbox);
-    setInputSignal((componentRef.instance as UiCheckbox).disabled, true);
+  it('dims and ignores taps while disabled', async () => {
+    const { host, target, box } = await renderCheckbox();
+    host.disabled.set(true);
+    await waitForUpdate();
+    expect(box().classList).toContain('opacity-50');
+
+    fireEvent.tap(target());
     await waitForUpdate();
-    // opacity-50 class lands on the box wrapper's class attribute.
-    const boxes = container.querySelectorAll('view');
-    const hasDim = Array.from(boxes).some((el) =>
-      el.getAttribute('class')?.includes('opacity-50'),
-    );
-    expect(hasDim).toBe(true);
+    expect(host.checked()).toBe(false);
+    expect(host.changes).toEqual([]);
   });
 });

package/dist/ui/components/checkbox/checkbox.ts

@@ -2,6 +2,7 @@ import {
   type ElementRef,
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   effect,
   input,
@@ -38,39 +39,39 @@ import { cn } from '../../utils/cn';
 })
 export class UiCheckbox {
   readonly checked = model(false);
-  readonly disabled = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   readonly changed = output<boolean>();
 
-  readonly checkmarkRef = viewChild<ElementRef>('checkmark');
+  readonly checkmarkRef = viewChild.required<ElementRef>('checkmark');
   #checkAnim?: AnimationHandle;
   #previousChecked?: boolean;
 
-  constructor() {
-    // Animate the checkmark on state transitions (skip initial render).
-    // `#previousChecked === undefined` guards the first run — we don't want to
-    // pop-in the checkmark when the component mounts already-checked.
-    // The `isChecked === this.#previousChecked` guard prevents a second animation
-    // from firing if the effect re-runs without an actual state change.
-    effect(() => {
-      const isChecked = this.checked();
-      const el = this.checkmarkRef()?.nativeElement;
-      // popIn/popOut call el.animate() which is inert in jsdom — the
-      // check-mark animation is exercised on-device.
-      /* v8 ignore start */
-      if (!el || this.#previousChecked === undefined) {
-        this.#previousChecked = isChecked;
-        return;
-      }
-      if (isChecked === this.#previousChecked) return;
+  /**
+   * Pops the checkmark in when checked and out when unchecked. A field rather
+   * than a constructor: Angular's test build keeps a function for a
+   * constructor that nothing calls, which an app's coverage report would show
+   * as uncovered.
+   *
+   * `#previousChecked === undefined` guards the first run: we don't want to
+   * pop in the checkmark when the component mounts already checked. The
+   * equality guard skips a run that isn't a change: `checked` set and set
+   * back before the effect runs (two taps in one frame) still re-runs it.
+   */
+  protected readonly checkmarkAnimation = effect(() => {
+    const isChecked = this.checked();
+    const el = this.checkmarkRef().nativeElement;
+    if (this.#previousChecked === undefined) {
       this.#previousChecked = isChecked;
+      return;
+    }
+    if (isChecked === this.#previousChecked) return;
+    this.#previousChecked = isChecked;
 
-      this.#checkAnim?.cancel();
-      this.#checkAnim = isChecked ? popIn(el) : popOut(el);
-      /* v8 ignore stop */
-    });
-  }
+    this.#checkAnim?.cancel();
+    this.#checkAnim = isChecked ? popIn(el) : popOut(el);
+  });
 
   protected readonly boxClass = computed(() =>
     cn(