@blotch/dolan 22.2.2 → 22.2.4

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

@@ -0,0 +1,24 @@
+export {
+  UiChart,
+  UiChartTooltip,
+  type UiChartTooltipContext,
+  tooltip,
+} from './chart';
+export {
+  type ChartColorScheme,
+  type ChartColorSchemeOption,
+  type ChartColorTokens,
+  CHART_DARK_COLORS,
+  CHART_LIGHT_COLORS,
+  DEFAULT_CHART_THEME,
+  UI_CHART_THEME,
+  type UiChartTheme,
+  provideChartTheme,
+  resolveChartPaint,
+} from './chart-theme';
+export {
+  type CartesianPresetOptions,
+  type ChartPadding,
+  type XYDatum,
+} from './chart-presets';
+export { type ChartViewport, type ChartZoomAxes } from './chart-zoom';

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

@@ -43,34 +43,34 @@ export class UiCheckbox {
 
   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(

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

@@ -1,8 +1,23 @@
 import { Component, signal } from '@angular/core';
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
-import { describe, expect, it } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
+import {
+  type MockInstance,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
+import {
+  type LynxMainThread,
+  lynxMainThread,
+} from '../../../test-utils/lynx-main-thread';
 import {
   UiCollapsible,
   UiCollapsibleContent,
@@ -10,103 +25,165 @@ import {
 } from './collapsible';
 
 @Component({
-  standalone: true,
-  imports: [UiCollapsible, LYNX_ELEMENTS],
-  template: `<ui-collapsible><text>Content</text></ui-collapsible>`,
+  imports: [
+    UiCollapsible,
+    UiCollapsibleTrigger,
+    UiCollapsibleContent,
+    LYNX_ELEMENTS,
+  ],
+  template: `
+    <ui-collapsible [(open)]="open" [disabled]="disabled()" class="gap-2">
+      <ui-collapsible-trigger class="px-2">
+        <text>Toggle</text>
+      </ui-collapsible-trigger>
+      <ui-collapsible-content class="pt-1">
+        <text>Details</text>
+      </ui-collapsible-content>
+    </ui-collapsible>
+  `,
 })
-class CollapsibleHost {}
+class CollapsibleHost {
+  readonly open = signal(false);
+  readonly disabled = signal(false);
+}
+
+const renderCollapsible = async () => {
+  const result = await render(CollapsibleHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as CollapsibleHost,
+    // The trigger's own view holds the tap listener; the projected text is
+    // inside it.
+    trigger: () => result.getByText('Toggle').parentElement!,
+    // The content's own view wraps the projected text while it's open.
+    content: () => result.queryByText('Details')?.parentElement ?? null,
+  };
+};
+
+/** `__ElementAnimate`'s first argument for starting an animation. */
+const START = 0;
+/** `__ElementAnimate`'s first argument for canceling an animation. */
+const CANCEL = 3;
 
 describe('UiCollapsible', () => {
-  it('renders projected content', async () => {
-    const { getByText } = await render(CollapsibleHost);
-    expect(getByText('Content')).toBeTruthy();
-  });
+  it("merges each part's class with its own", async () => {
+    const { container, host, trigger, content } = await renderCollapsible();
+    // The host element carries the class too, so look for the view that has
+    // both its own and the given class.
+    expect(container.querySelector('.flex-col.gap-2')).not.toBeNull();
+    expect(trigger().classList).toContain('flex-row');
+    expect(trigger().classList).toContain('px-2');
 
-  it('toggle() flips the open state', async () => {
-    const { componentRef } = await render(UiCollapsible);
-    const inst = componentRef.instance as UiCollapsible;
-    expect(inst.open()).toBe(false);
-    inst.toggle();
-    expect(inst.open()).toBe(true);
-    inst.toggle();
-    expect(inst.open()).toBe(false);
+    host.open.set(true);
+    await waitForUpdate();
+    expect(content()!.classList).toContain('flex-col');
+    expect(content()!.classList).toContain('pt-1');
   });
 
-  it('toggle() is a no-op when disabled', async () => {
-    const { componentRef } = await render(UiCollapsible);
-    const inst = componentRef.instance as UiCollapsible;
-    setInputSignal(inst.disabled, true);
-    inst.toggle();
-    expect(inst.open()).toBe(false);
-  });
-});
+  it('opens and closes when the trigger is tapped', async () => {
+    const { host, trigger, content } = await renderCollapsible();
+    // Closed, the content isn't mounted at all.
+    expect(content()).toBeNull();
 
-describe('UiCollapsibleTrigger', () => {
-  it('onTap delegates to the parent collapsible.toggle()', async () => {
-    const parentResult = await render(UiCollapsible);
-    const parent = parentResult.componentRef.instance as UiCollapsible;
+    fireEvent.tap(trigger());
+    await waitForUpdate();
+    expect(content()).not.toBeNull();
+    expect(host.open()).toBe(true);
 
-    const triggerResult = await render(UiCollapsibleTrigger, {
-      providers: [{ provide: UiCollapsible, useValue: parent }],
-    });
-    const trigger = triggerResult.componentRef.instance as UiCollapsibleTrigger;
-    (trigger as unknown as { onTap: () => void }).onTap();
-    expect(parent.open()).toBe(true);
+    fireEvent.tap(trigger());
+    await waitForUpdate();
+    expect(content()).toBeNull();
+    expect(host.open()).toBe(false);
   });
 
-  it('applies disabled dim class when parent is disabled', async () => {
-    const parentResult = await render(UiCollapsible);
-    const parent = parentResult.componentRef.instance as UiCollapsible;
-    setInputSignal(parent.disabled, true);
-
-    const triggerResult = await render(UiCollapsibleTrigger, {
-      providers: [{ provide: UiCollapsible, useValue: parent }],
-    });
+  it('opens when its `open` is set', async () => {
+    const { host, content } = await renderCollapsible();
+    host.open.set(true);
     await waitForUpdate();
-    const view = triggerResult.container.querySelector('view');
-    expect(view?.getAttribute('class')).toContain('opacity-50');
+    expect(content()).not.toBeNull();
   });
-});
 
-describe('UiCollapsibleContent', () => {
-  it('runs the reveal animation on open via setTimeout', async () => {
-    const parentResult = await render(UiCollapsible);
-    const parent = parentResult.componentRef.instance as UiCollapsible;
+  it('dims its trigger and ignores taps while disabled', async () => {
+    const { host, trigger, content } = await renderCollapsible();
+    expect(trigger().classList).not.toContain('opacity-50');
 
-    const contentResult = await render(UiCollapsibleContent, {
-      providers: [{ provide: UiCollapsible, useValue: parent }],
-    });
-    const content = contentResult.componentRef.instance as UiCollapsibleContent;
-    // JIT + jsdom doesn't populate the `#content` viewChild — patch it with a
-    // signal returning the outer view so the setTimeout body's `el` check
-    // passes and revealIn actually runs.
-    const view = contentResult.container.querySelector('view') as Element;
-    (content as unknown as { contentRef: unknown }).contentRef = signal({
-      nativeElement: view,
-    });
-
-    parent.open.set(true);
+    host.disabled.set(true);
     await waitForUpdate();
-    await waitForUpdate(); // wait for the effect's setTimeout(_, 0) to fire
+    expect(trigger().classList).toContain('opacity-50');
 
-    // Toggle off then on again to hit the cancel path with `#anim` already set.
-    parent.open.set(false);
-    await waitForUpdate();
-    parent.open.set(true);
-    await waitForUpdate();
+    fireEvent.tap(trigger());
     await waitForUpdate();
-    expect(parent.open()).toBe(true);
+    expect(content()).toBeNull();
+    expect(host.open()).toBe(false);
   });
 
-  it('bails out inside setTimeout when contentRef is undefined', async () => {
-    const parentResult = await render(UiCollapsible);
-    const parent = parentResult.componentRef.instance as UiCollapsible;
-    await render(UiCollapsibleContent, {
-      providers: [{ provide: UiCollapsible, useValue: parent }],
+  describe('reveal animation', () => {
+    // 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());
+
+    /**
+     * The keys of the animations started on an element.
+     */
+    const startedOn = (element: Element | null) =>
+      animate.mock.calls
+        .filter(
+          ([target, [operation]]) => target === element && operation === START,
+        )
+        .map(([, [, key]]) => key);
+
+    it('slides the content down into place each time it opens', async () => {
+      const { trigger, content } = await renderCollapsible();
+
+      fireEvent.tap(trigger());
+      // The first update runs the effect, which waits a macrotask so the
+      // content is committed to Lynx's tree; the second lets that run.
+      await waitForUpdate();
+      await waitForUpdate();
+      expect(animate).toHaveBeenCalledWith(content(), [
+        START,
+        expect.any(String),
+        [
+          { transform: 'translateY(-8px)', opacity: 0 },
+          { transform: 'translateY(0)', opacity: 1 },
+        ],
+        // No fill: once it ends, the content's inline resting style applies.
+        expect.objectContaining({ fill: 'none' }),
+      ]);
+      const [firstKey] = startedOn(content());
+
+      fireEvent.tap(trigger());
+      await waitForUpdate();
+      fireEvent.tap(trigger());
+      await waitForUpdate();
+      await waitForUpdate();
+      // Reopening stops the previous reveal before it plays a new one on the
+      // content's new view.
+      expect(animate).toHaveBeenCalledWith(expect.anything(), [
+        CANCEL,
+        firstKey,
+      ]);
+      expect(startedOn(content())).toHaveLength(1);
+    });
+
+    it("doesn't animate content that closed before its reveal began", async () => {
+      const { componentRef, trigger, content } = await renderCollapsible();
+
+      fireEvent.tap(trigger());
+      // The effect has scheduled the reveal for the next macrotask.
+      await waitForUpdate();
+      // Close it before then, and render that straight away.
+      fireEvent.tap(trigger());
+      componentRef.changeDetectorRef.detectChanges();
+      expect(content()).toBeNull();
+
+      await waitForUpdate();
+      expect(
+        animate.mock.calls.filter(([, [operation]]) => operation === START),
+      ).toEqual([]);
     });
-    parent.open.set(true);
-    await waitForUpdate();
-    await waitForUpdate();
-    expect(parent.open()).toBe(true);
   });
 });

package/dist/ui/components/collapsible/collapsible.ts

@@ -101,20 +101,25 @@ export class UiCollapsibleContent {
   readonly contentRef = viewChild<ElementRef>('content');
   #anim?: AnimationHandle;
 
-  constructor() {
-    // Animate the reveal whenever the panel opens. contentRef only resolves while
-    // the `@if` content is mounted; defer one macrotask so the freshly (re)created
-    // element is committed to the native tree before we animate it.
-    effect(() => {
-      if (!this.collapsible.open()) return;
-      setTimeout(() => {
-        const el = this.contentRef()?.nativeElement;
-        if (!el) return;
-        this.#anim?.cancel();
-        this.#anim = revealIn(el, { fromY: -8, fill: 'none' });
-      }, 0);
-    });
-  }
+  /**
+   * Animates the reveal whenever the panel opens. 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.
+   *
+   * contentRef only resolves while the `@if` content is mounted; defer one
+   * macrotask so the freshly (re)created element is committed to the native
+   * tree before we animate it. By then the panel may have closed again, which
+   * leaves nothing to animate.
+   */
+  protected readonly revealing = effect(() => {
+    if (!this.collapsible.open()) return;
+    setTimeout(() => {
+      const el = this.contentRef()?.nativeElement;
+      if (!el) return;
+      this.#anim?.cancel();
+      this.#anim = revealIn(el, { fromY: -8, fill: 'none' });
+    }, 0);
+  });
 
   protected readonly contentClass = computed(() =>
     cn('flex-col flex', this.userClass()),