@blotch/dolan 22.2.3 → 22.2.5

package/dist/ui/components/progress/progress.ts

@@ -2,6 +2,7 @@ import {
   type ElementRef,
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   effect,
   input,
@@ -29,68 +30,66 @@ export class UiProgress {
   /**
    * When true, shows an indeterminate (looping) animation
    */
-  readonly indeterminate = input(false);
+  readonly indeterminate = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly fillRef = viewChild<ElementRef>('fill');
+  readonly fillRef = viewChild.required<ElementRef>('fill');
   #fillAnim?: AnimationHandle;
   #indeterminateAnim?: AnimationHandle;
   #previousPercent: number | null = null;
 
-  constructor() {
-    effect(() => {
-      const el = this.fillRef()?.nativeElement;
-      // el.animate() is inert in jsdom. Determinate and indeterminate paths
-      // are exercised on-device; the effect's animation branch cannot be
-      // meaningfully verified from a unit test.
-      /* v8 ignore start */
-      if (!el) return;
-
-      // Handle indeterminate mode with infinite sliding animation.
-      // The fill element is 40% of the track width. `translateX` percentages
-      // are relative to the element's OWN width, so:
-      //   translateX(-100%) = left edge at -40% of track = starts off-screen left
-      //   translateX(250%)  = left edge at +100% of track = exits off-screen right
-      // 250% is the minimum that pushes the 40%-wide fill fully past the right edge.
-      if (this.indeterminate()) {
-        this.#fillAnim?.cancel();
-        this.#indeterminateAnim?.cancel();
-        this.#indeterminateAnim = el.animate(
-          [
-            { transform: 'translateX(-100%)', width: '40%' },
-            { transform: 'translateX(250%)', width: '40%' },
-          ],
-          {
-            duration: 1200,
-            easing: EASING.standard,
-            iterations: Infinity,
-          },
-        );
-        return;
-      }
-
-      // Determinate mode — animate width changes smoothly.
-      // `#previousPercent === null` skips the very first effect run so
-      // the bar doesn't animate from 0% → initial value on mount.
-      // The equality guard prevents redundant animations if the effect
-      // re-runs without an actual percent change.
-      this.#indeterminateAnim?.cancel();
-      const percent = this.percent();
-      if (this.#previousPercent === null) {
-        this.#previousPercent = percent;
-        return;
-      }
-      if (percent === this.#previousPercent) return;
+  /**
+   * Slides the fill while indeterminate, and animates its width as the value
+   * changes. 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 fillAnimation = effect(() => {
+    const el = this.fillRef().nativeElement;
 
+    // Handle indeterminate mode with infinite sliding animation.
+    // The fill element is 40% of the track width. `translateX` percentages
+    // are relative to the element's OWN width, so:
+    //   translateX(-100%) = left edge at -40% of track = starts off-screen left
+    //   translateX(250%)  = left edge at +100% of track = exits off-screen right
+    // 250% is the minimum that pushes the 40%-wide fill fully past the right edge.
+    if (this.indeterminate()) {
       this.#fillAnim?.cancel();
-      this.#fillAnim = el.animate(
-        [{ width: `${this.#previousPercent}%` }, { width: `${percent}%` }],
-        { duration: DURATION.slow, easing: EASING.standard, fill: 'forwards' },
+      this.#indeterminateAnim?.cancel();
+      this.#indeterminateAnim = el.animate(
+        [
+          { transform: 'translateX(-100%)', width: '40%' },
+          { transform: 'translateX(250%)', width: '40%' },
+        ],
+        {
+          duration: 1200,
+          easing: EASING.standard,
+          iterations: Infinity,
+        },
       );
+      return;
+    }
+
+    // Determinate mode — animate width changes smoothly.
+    // `#previousPercent === null` skips the very first effect run so
+    // the bar doesn't animate from 0% → initial value on mount.
+    // The equality guard skips the animation when the effect re-runs without
+    // a percent change: leaving indeterminate mode at the same value.
+    this.#indeterminateAnim?.cancel();
+    const percent = this.percent();
+    if (this.#previousPercent === null) {
       this.#previousPercent = percent;
-      /* v8 ignore stop */
-    });
-  }
+      return;
+    }
+    if (percent === this.#previousPercent) return;
+
+    this.#fillAnim?.cancel();
+    this.#fillAnim = el.animate(
+      [{ width: `${this.#previousPercent}%` }, { width: `${percent}%` }],
+      { duration: DURATION.slow, easing: EASING.standard, fill: 'forwards' },
+    );
+    this.#previousPercent = percent;
+  });
 
   protected readonly percent = computed(() => {
     const m = this.max();
@@ -100,9 +99,9 @@ export class UiProgress {
 
   protected readonly trackClass = computed(() =>
     cn(
-      // bg-muted (solid, theme-aware) instead of bg-primary/20: opacity
-      // modifiers on semantic colors don't work on Lynx (colors are opaque
-      // rgba values with no separable channels).
+      // bg-muted (solid, theme-aware) instead of bg-primary/20: a modifier
+      // needs the theme's --primary-rgb, and in a theme copied before it
+      // existed the track would disappear.
       'h-2 w-full rounded-full bg-muted overflow-hidden',
       this.userClass(),
     ),

package/dist/ui/components/radio-group/radio-group.test.ts

@@ -1,115 +1,160 @@
 import { Component, signal } from '@angular/core';
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
-import { describe, expect, it, vi } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
+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 { UiRadioGroup, UiRadioGroupItem } from './radio-group';
 
 @Component({
-  standalone: true,
-  imports: [UiRadioGroup, UiRadioGroupItem, LYNX_ELEMENTS],
+  imports: [UiRadioGroup, UiRadioGroupItem],
   template: `
-    <ui-radio-group [(value)]="value">
-      <ui-radio-group-item value="a">A</ui-radio-group-item>
-      <ui-radio-group-item value="b">B</ui-radio-group-item>
+    <ui-radio-group
+      [(value)]="value"
+      [disabled]="disabled()"
+      class="mt-2"
+      (changed)="changes.push($event)"
+    >
+      <ui-radio-group-item value="a" class="pl-1">Apple</ui-radio-group-item>
+      <ui-radio-group-item value="b">Banana</ui-radio-group-item>
     </ui-radio-group>
   `,
 })
 class RadioGroupHost {
-  value = 'a';
+  readonly value = signal('a');
+  readonly disabled = signal(false);
+  readonly changes: string[] = [];
 }
 
+const renderGroup = async () => {
+  const result = await render(RadioGroupHost);
+  /**
+   * An item's row, which takes the tap: its label's parent.
+   */
+  const item = (label: string) => result.getByText(label).parentElement!;
+  /**
+   * An item's dot, inside the circle that's the row's first child.
+   */
+  const dot = (label: string) =>
+    item(label).firstElementChild!.firstElementChild!;
+  return {
+    ...result,
+    host: result.componentRef.instance as RadioGroupHost,
+    item,
+    dot,
+  };
+};
+
+/** `__ElementAnimate`'s first argument for starting an animation. */
+const START = 0;
+/** `__ElementAnimate`'s first argument for canceling one. */
+const CANCEL = 3;
+
 describe('UiRadioGroup', () => {
-  it('renders each radio item', async () => {
-    const { getByText } = await render(RadioGroupHost);
-    expect(getByText('A')).toBeTruthy();
-    expect(getByText('B')).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('select() updates the model and emits `changed`', async () => {
-    const { componentRef } = await render(UiRadioGroup);
-    const inst = componentRef.instance as UiRadioGroup;
-    const emitted: string[] = [];
-    inst.changed.subscribe((v) => emitted.push(v));
-    inst.select('a');
-    expect(inst.value()).toBe('a');
-    inst.select('b');
-    expect(inst.value()).toBe('b');
-    expect(emitted).toEqual(['a', 'b']);
+  it('renders each item with its label and class', async () => {
+    const { container, item } = await renderGroup();
+    expect(container.querySelector('.flex-col')?.classList).toContain('mt-2');
+    expect(item('Apple').classList).toContain('pl-1');
+    expect(item('Banana').classList).toContain('h-11');
   });
 
-  it('select() is a no-op when disabled', async () => {
-    const { componentRef } = await render(UiRadioGroup);
-    const inst = componentRef.instance as UiRadioGroup;
-    setInputSignal(inst.disabled, true);
-    const emitted = vi.fn();
-    inst.changed.subscribe(emitted);
-    inst.select('x');
-    expect(inst.value()).toBe('');
-    expect(emitted).not.toHaveBeenCalled();
+  it('shows the dot of the selected item only', async () => {
+    const { dot } = await renderGroup();
+    expect(dot('Apple').getAttribute('style')).toContain('opacity: 1');
+    expect(dot('Banana').getAttribute('style')).toContain('opacity: 0');
   });
-});
-
-describe('UiRadioGroupItem', () => {
-  it('select() delegates to the parent group', async () => {
-    const parentResult = await render(UiRadioGroup);
-    const parent = parentResult.componentRef.instance as UiRadioGroup;
 
-    const itemResult = await render(UiRadioGroupItem, {
-      providers: [{ provide: UiRadioGroup, useValue: parent }],
-    });
-    const item = itemResult.componentRef.instance as UiRadioGroupItem;
-    setInputSignal(item.itemValue, 'a');
+  it('selects the tapped item, updating the value and emitting `changed`', async () => {
+    const { host, item, dot } = await renderGroup();
+    fireEvent.tap(item('Banana'));
     await waitForUpdate();
-
-    item.select();
-    expect(parent.value()).toBe('a');
+    expect(host.value()).toBe('b');
+    expect(host.changes).toEqual(['b']);
+    expect(dot('Banana').getAttribute('style')).toContain('opacity: 1');
+    expect(dot('Apple').getAttribute('style')).toContain('opacity: 0');
   });
 
-  it('select() is a no-op when the parent group is disabled', async () => {
-    const parentResult = await render(UiRadioGroup);
-    const parent = parentResult.componentRef.instance as UiRadioGroup;
-    setInputSignal(parent.disabled, true);
+  it("doesn't animate the dot on mount, then pops it in and out as the selection changes", async () => {
+    const { host, dot } = await renderGroup();
+    // A pre-selected item shows its dot without animating it in.
+    expect(animate).not.toHaveBeenCalled();
 
-    const itemResult = await render(UiRadioGroupItem, {
-      providers: [{ provide: UiRadioGroup, useValue: parent }],
-    });
-    const item = itemResult.componentRef.instance as UiRadioGroupItem;
-    setInputSignal(item.itemValue, 'a');
+    host.value.set('b');
     await waitForUpdate();
+    // The new selection's dot pops in from a smaller scale...
+    expect(animate).toHaveBeenCalledWith(dot('Banana'), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'scale(0.6)', opacity: 0 },
+        { transform: 'scale(1)', opacity: 1 },
+      ],
+      expect.objectContaining({ fill: 'forwards' }),
+    ]);
+    // ...and the old one pops out.
+    expect(animate).toHaveBeenCalledWith(dot('Apple'), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'scale(1)', opacity: 1 },
+        { transform: 'scale(0.8)', opacity: 0 },
+      ],
+      expect.objectContaining({ fill: 'forwards' }),
+    ]);
 
-    item.select();
-    expect(parent.value()).toBe('');
+    // Selecting it again cuts its pop-out short.
+    host.value.set('a');
+    await waitForUpdate();
+    expect(animate).toHaveBeenCalledWith(dot('Apple'), [
+      CANCEL,
+      expect.any(String),
+    ]);
   });
 
-  it('effect runs the popIn / popOut animation on selection change', async () => {
-    // The effect skips the first run (initial mount) then swaps between popIn
-    // (select) and popOut (deselect). Exercise both branches by toggling the
-    // parent's value across two mounted items.
-    // JIT + jsdom does not populate the `#dot` viewChild query, so
-    // monkey-patch dotRef with a signal returning a fake ElementRef so the
-    // `if (!el || previousSelected === undefined)` guard doesn't short-circuit.
-    const parentResult = await render(UiRadioGroup);
-    const parent = parentResult.componentRef.instance as UiRadioGroup;
-
-    const itemResult = await render(UiRadioGroupItem, {
-      providers: [{ provide: UiRadioGroup, useValue: parent }],
-    });
-    const item = itemResult.componentRef.instance as UiRadioGroupItem;
-    setInputSignal(item.itemValue, 'a');
-    const view = itemResult.container.querySelector('view') as Element;
-    (item as unknown as { dotRef: unknown }).dotRef = signal({
-      nativeElement: view,
-    });
+  it('ignores taps while disabled, and dims its items', async () => {
+    const { host, item } = await renderGroup();
+    host.disabled.set(true);
     await waitForUpdate();
+    expect(item('Apple').classList).toContain('opacity-50');
 
-    // Effect first run initializes `#previousSelected`, then returns.
-    // Select => popIn branch.
-    parent.value.set('a');
+    fireEvent.tap(item('Banana'));
     await waitForUpdate();
-    // Deselect => popOut branch.
-    parent.value.set('b');
+    expect(host.value()).toBe('a');
+    expect(host.changes).toEqual([]);
+  });
+
+  it("can't be selected through its own select() while disabled", async () => {
+    // An item checks the group first, but select() is public: a caller that
+    // goes straight to the group gets the same rule.
+    const { componentRef } = await render(UiRadioGroup);
+    componentRef.setInput('disabled', true);
     await waitForUpdate();
-    expect(parent.value()).toBe('b');
+    const group = componentRef.instance as UiRadioGroup;
+    const changed = vi.fn();
+    group.changed.subscribe(changed);
+
+    group.select('b');
+    expect(group.value()).toBe('');
+    expect(changed).not.toHaveBeenCalled();
   });
 });

package/dist/ui/components/radio-group/radio-group.ts

@@ -2,6 +2,7 @@ import {
   type ElementRef,
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   effect,
   inject,
@@ -28,7 +29,7 @@ import { cn } from '../../utils/cn';
 })
 export class UiRadioGroup {
   readonly value = model<string>('');
-  readonly disabled = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   readonly changed = output<string>();
@@ -70,36 +71,36 @@ export class UiRadioGroupItem {
   readonly itemValue = input.required<string>({ alias: 'value' });
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly dotRef = viewChild<ElementRef>('dot');
+  readonly dotRef = viewChild.required<ElementRef>('dot');
   #dotAnim?: AnimationHandle;
-  #previousSelected?: boolean;
+  #mounted = false;
 
   protected readonly isSelected = computed(
     () => this.#group.value() === this.itemValue(),
   );
 
-  constructor() {
-    // Same guard pattern as UiCheckbox: `#previousSelected === undefined` skips
-    // the first run so a pre-selected item doesn't animate in on mount.
-    // The equality guard prevents duplicate animations if the effect re-runs.
-    effect(() => {
-      const selected = this.isSelected();
-      const el = this.dotRef()?.nativeElement;
-      if (!el || this.#previousSelected === undefined) {
-        this.#previousSelected = selected;
-        return;
-      }
-      // Defensive early return: with only `isSelected()` as a reactive input,
-      // Angular's computed equality dedupes same-value emissions so the effect
-      // never re-runs with an unchanged `selected`. Kept for safety on-device.
-      /* v8 ignore next 1 */
-      if (selected === this.#previousSelected) return;
-      this.#previousSelected = selected;
-
-      this.#dotAnim?.cancel();
-      this.#dotAnim = selected ? popIn(el) : popOut(el);
-    });
-  }
+  /**
+   * Pops the dot in when the item is selected and out when it's deselected.
+   * 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.
+   *
+   * The first run is the mount, skipped so a pre-selected item doesn't
+   * animate in. Every later run is a change of selection: `isSelected` is a
+   * computed, which only notifies when its value changes, and the dot is
+   * always in the template, so its query never changes.
+   */
+  protected readonly dotAnimation = effect(() => {
+    const selected = this.isSelected();
+    const el = this.dotRef().nativeElement;
+    if (!this.#mounted) {
+      this.#mounted = true;
+      return;
+    }
+
+    this.#dotAnim?.cancel();
+    this.#dotAnim = selected ? popIn(el) : popOut(el);
+  });
 
   protected readonly itemClass = computed(() =>
     cn(

package/dist/ui/components/scatter-chart/scatter-chart.test.ts

@@ -1,3 +1,9 @@
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
 import { createChartRuntime } from '@tanstack/charts/runtime';
 import type {
   ChartDefinition,
@@ -5,7 +11,8 @@ import type {
   SceneNode,
 } from '@tanstack/charts/types';
 import { describe, expect, it } from 'vitest';
-import { scatterChartDefinition } from './scatter-chart';
+import type { XYDatum } from '../chart/chart-presets';
+import { UiScatterChart, scatterChartDefinition } from './scatter-chart';
 
 const data = [
   { x: 150, y: 50 },
@@ -65,3 +72,69 @@ describe('scatterChartDefinition', () => {
     expect(scene.scales['x']!.domain).toEqual([150, 170]);
   });
 });
+
+@Component({
+  imports: [UiScatterChart],
+  template: `
+    <ui-scatter-chart
+      [data]="data"
+      [width]="300"
+      [radius]="radius()"
+      (pointTap)="tapped.push($event)"
+    />
+  `,
+})
+class ScatterChartHost {
+  readonly data = data;
+  readonly radius = signal(7);
+  /** Every `pointTap`, in order. */
+  readonly tapped: XYDatum[] = [];
+}
+
+/**
+ * The SVG the chart's marks layer draws.
+ */
+const marksSvg = (container: Element) =>
+  container.querySelectorAll('svg')[1]!.getAttribute('content')!;
+
+/**
+ * Where the chart drew each dot, and how big.
+ */
+const dotsDrawn = (container: Element) =>
+  [
+    ...marksSvg(container).matchAll(
+      /<circle cx="([\d.-]+)" cy="([\d.-]+)" r="([\d.-]+)"/g,
+    ),
+  ].map(([, x, y, r]) => ({ x: Number(x), y: Number(y), r: Number(r) }));
+
+/**
+ * Touches a spot of the chart and lifts the finger right there: a tap.
+ */
+const tap = async (container: Element, at: { x: number; y: number }) => {
+  const root = container.querySelector('[accessibility-label]')!;
+  fireEvent.touchstart(root, { touches: [at] });
+  fireEvent.touchend(root, { touches: [at] });
+  await waitForUpdate();
+};
+
+describe('UiScatterChart', () => {
+  it('draws a dot per datum with its inputs', async () => {
+    const { componentRef, container } = await render(ScatterChartHost);
+    expect(dotsDrawn(container).map((dot) => dot.r)).toEqual([7, 7, 7]);
+
+    (componentRef.instance as ScatterChartHost).radius.set(3);
+    await waitForUpdate();
+    expect(dotsDrawn(container).map((dot) => dot.r)).toEqual([3, 3, 3]);
+  });
+
+  it("emits a tapped point's datum, and nothing for a tap off the points", async () => {
+    const { componentRef, container } = await render(ScatterChartHost);
+    const host = componentRef.instance as ScatterChartHost;
+    const last = dotsDrawn(container)[2]!;
+    await tap(container, { x: last.x, y: last.y });
+    expect(host.tapped).toEqual([data[2]]);
+
+    await tap(container, { x: -100, y: -100 });
+    expect(host.tapped).toEqual([data[2]]);
+  });
+});