@blotch/dolan 22.2.2 → 22.2.4

package/dist/ui/components/toast/toast.ts

@@ -1,4 +1,5 @@
 import {
+  type OnDestroy,
   type OnInit,
   Component,
   ElementRef,
@@ -14,7 +15,12 @@ import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
 import { type AnimationHandle, DURATION, EASING } from '../../utils/animate';
 import { cn } from '../../utils/cn';
-import { type ToastData, dismissToast, toasts } from './toast-state';
+import {
+  type ToastAction,
+  type ToastData,
+  dismissToast,
+  toasts,
+} from './toast-state';
 
 // --- Drag-to-dismiss tuning (front toast only) ---
 // Minimum downward travel (px) before releasing dismisses the toast instead of
@@ -53,7 +59,6 @@ const stackTransform = (depth: number): string =>
  */
 @Component({
   selector: 'ui-toast-item',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   // Styling + interaction live on the HOST element (a plain `view`, since the
@@ -80,13 +85,13 @@ const stackTransform = (depth: number): string =>
       }
     </view>
     @if (data().action; as action) {
-      <view [class]="actionClass()" (catchtap)="onAction()">
+      <view [class]="actionClass()" (catchtap)="onAction(action)">
         <text [class]="actionTextClass()">{{ action.label }}</text>
       </view>
     }
   `,
 })
-export class UiToastItem implements OnInit {
+export class UiToastItem implements OnInit, OnDestroy {
   readonly data = input.required<ToastData>();
   // 0 = front (newest, interactive); higher = further back in the stack.
   readonly depth = input.required<number>();
@@ -96,6 +101,8 @@ export class UiToastItem implements OnInit {
   readonly #host = inject(ElementRef);
   #anim?: AnimationHandle;
   #dismissTimer: ReturnType<typeof setTimeout> | null = null;
+  // The one that emits `dismissed` once the exit animation has played.
+  #exitTimer: ReturnType<typeof setTimeout> | null = null;
 
   // Hidden until the entrance animation runs, so the toast doesn't flash at its
   // resting position for a frame before sliding/fading in.
@@ -109,28 +116,25 @@ export class UiToastItem implements OnInit {
   // unspecified order, and the timer can race both.
   #isDismissing = false;
 
-  constructor() {
-    // Restack: when a toast in front is dismissed (or a new one is pushed) this
-    // toast's depth changes — animate it to its new slot. `effect` runs after
-    // inputs are set, so the first run just records the starting depth.
-    let prevDepth: number | null = null;
-    /* v8 ignore start -- JIT reads input.required<number>() before the value is
-       set, so the first effect run throws NG0950 before `depth()` is tracked
-       as a dependency; subsequent depth changes therefore don't re-fire the
-       effect. On device (AOT) inputs are wired before the constructor runs. */
-    effect(() => {
-      const d = this.depth();
-      if (prevDepth === null) {
-        prevDepth = d;
-        return;
-      }
-      if (d === prevDepth) return;
-      const from = prevDepth;
-      prevDepth = d;
-      this.#animateRestack(from, d);
-    });
-    /* v8 ignore stop */
-  }
+  // The depth the restack effect last saw, so it knows where to animate from.
+  #stackedDepth: number | null = null;
+
+  /**
+   * Restack: when a toast in front is dismissed (or a new one is pushed) this
+   * toast's depth changes — animate it to its new slot. 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 restacking = effect(() => {
+    const depth = this.depth();
+    const from = this.#stackedDepth;
+    this.#stackedDepth = depth;
+    // `effect` runs after inputs are set, so the first run just records the
+    // starting depth. After that it only re-runs once the depth changes; the
+    // second check is a safeguard.
+    if (from === null || from === depth) return;
+    this.#animateRestack(from, depth);
+  });
 
   ngOnInit(): void {
     // Start the auto-dismiss countdown when the toast mounts — i.e. when it is
@@ -228,8 +232,12 @@ export class UiToastItem implements OnInit {
     this.dismiss();
   }
 
-  protected onAction(): void {
-    this.data().action?.onAction();
+  /**
+   * Runs the toast's action, then dismisses it. The action button only
+   * renders for a toast that has an action, which it passes in.
+   */
+  protected onAction(action: ToastAction): void {
+    action.onAction();
     this.dismiss();
   }
 
@@ -295,13 +303,26 @@ export class UiToastItem implements OnInit {
       this.#dismissTimer = null;
     }
     this.#animateOut();
-    setTimeout(() => this.dismissed.emit(), DURATION.fast + 20);
+    this.#exitTimer = setTimeout(
+      () => this.dismissed.emit(),
+      DURATION.fast + 20,
+    );
+  }
+
+  /**
+   * A toast can be destroyed before its timers fire: `dismissToast(id)` drops
+   * it from the queue straight away, and the toaster itself can be removed.
+   * Without this, the auto-dismiss timer later ran `dismiss()` on the destroyed
+   * component: it animated a detached element and emitted `dismissed` from a
+   * destroyed output, which Angular warns about in dev builds (NG0953).
+   */
+  ngOnDestroy(): void {
+    if (this.#dismissTimer) clearTimeout(this.#dismissTimer);
+    if (this.#exitTimer) clearTimeout(this.#exitTimer);
   }
 
   #animateIn(): void {
     const el = this.#host.nativeElement;
-    /* v8 ignore next 1 -- host is always mounted when animateIn runs in tests */
-    if (!el) return;
     this.#anim?.cancel();
     // Reveal now that the animation owns opacity (0 → 1 below); afterwards the
     // host style keeps it at 1. Without this the resting-position frame before
@@ -341,32 +362,24 @@ export class UiToastItem implements OnInit {
   }
 
   /**
-   *   * Move to a new stack slot when depth changes (a toast in front popped, or a
-   *   * new one pushed this one back). This is what makes the stack slide forward
-   *   * when the front toast is dismissed.
-   * v8 ignore start -- only invoked from the restack effect, which never
-   *     re-runs in JIT (see the effect body above); exercised on device.
+   * Move to a new stack slot when depth changes (a toast in front popped, or a
+   * new one pushed this one back). This is what makes the stack slide forward
+   * when the front toast is dismissed.
    */
   #animateRestack(from: number, to: number): void {
     // A toast pushed while this one is animating out would shift its depth and
     // restack it back into view — let the exit win instead.
     if (this.#isDismissing) return;
     const el = this.#host.nativeElement;
-    if (!el) return;
     this.#anim?.cancel();
     this.#anim = el.animate(
       [{ transform: stackTransform(from) }, { transform: stackTransform(to) }],
       { duration: DURATION.normal, easing: EASING.standard, fill: 'forwards' },
     );
   }
-  /**
-   * v8 ignore stop
-   */
 
   #animateOut(): void {
     const el = this.#host.nativeElement;
-    /* v8 ignore next 1 -- host is always mounted when animateOut runs in tests */
-    if (!el) return;
     this.#anim?.cancel();
 
     const d = this.depth();
@@ -414,18 +427,13 @@ export class UiToastItem implements OnInit {
   #snapBack(fromOffset: number): void {
     const el = this.#host.nativeElement;
     this.#anim?.cancel();
-    /* v8 ignore start -- host is always mounted when snapBack runs in tests;
-       the else branch is defensive against a host-not-yet-committed race */
-    if (el) {
-      this.#anim = el.animate(
-        [
-          { transform: `translateY(${fromOffset}px) scale(1)` },
-          { transform: 'translateY(0px) scale(1)' },
-        ],
-        { duration: DURATION.fast, easing: EASING.spring, fill: 'forwards' },
-      );
-    }
-    /* v8 ignore stop */
+    this.#anim = el.animate(
+      [
+        { transform: `translateY(${fromOffset}px) scale(1)` },
+        { transform: 'translateY(0px) scale(1)' },
+      ],
+      { duration: DURATION.fast, easing: EASING.spring, fill: 'forwards' },
+    );
     // Match the inline transform to the animation's resting state so the two
     // agree once fill:'forwards' hands control back to the style binding.
     this.dragOffset.set(0);
@@ -447,7 +455,6 @@ export class UiToastItem implements OnInit {
  */
 @Component({
   selector: 'ui-toaster',
-  standalone: true,
   imports: [LYNX_ELEMENTS, UiToastItem],
   encapsulation: ViewEncapsulation.None,
   template: `

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

@@ -1,186 +1,293 @@
-import { Component } from '@angular/core';
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { Component, signal } from '@angular/core';
+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 { UiToggle, UiToggleGroup, UiToggleGroupItem } from './toggle';
+import { fireLynxEvent } from '../../../test-utils/fire-lynx-event';
+import {
+  type ToggleSize,
+  type ToggleVariant,
+  UiToggle,
+  UiToggleGroup,
+  UiToggleGroupItem,
+} from './toggle';
 
 @Component({
-  standalone: true,
   imports: [UiToggle, LYNX_ELEMENTS],
-  template: `<ui-toggle><text>Bold</text></ui-toggle>`,
+  template: `
+    <ui-toggle
+      [(pressed)]="bold"
+      [variant]="variant()"
+      [size]="size()"
+      [disabled]="disabled()"
+      class="w-20"
+      ><text>Bold</text></ui-toggle
+    >
+  `,
 })
-class ToggleHost {}
+class ToggleHost {
+  readonly bold = signal(false);
+  readonly variant = signal<ToggleVariant>('default');
+  readonly size = signal<ToggleSize>('default');
+  readonly disabled = signal(false);
+}
 
-describe('UiToggle', () => {
-  it('renders projected content', async () => {
-    const { getByText } = await render(ToggleHost);
-    expect(getByText('Bold')).toBeTruthy();
-  });
+@Component({
+  imports: [UiToggleGroup, UiToggleGroupItem, LYNX_ELEMENTS],
+  template: `
+    <ui-toggle-group
+      [type]="type()"
+      [(value)]="align"
+      [variant]="variant()"
+      [size]="size()"
+      [disabled]="disabled()"
+      class="w-full"
+    >
+      <ui-toggle-group-item value="left" class="flex-1"
+        ><text>Left</text></ui-toggle-group-item
+      >
+      <ui-toggle-group-item value="center"
+        ><text>Center</text></ui-toggle-group-item
+      >
+      <ui-toggle-group-item value="right"
+        ><text>Right</text></ui-toggle-group-item
+      >
+    </ui-toggle-group>
+  `,
+})
+class ToggleGroupHost {
+  readonly type = signal<'single' | 'multiple'>('single');
+  readonly align = signal<string[]>([]);
+  readonly variant = signal<ToggleVariant>('default');
+  readonly size = signal<ToggleSize>('default');
+  readonly disabled = signal(false);
+}
+
+/**
+ * The view (the one that takes presses) a toggle or toggle group item
+ * projects its label into.
+ */
+const viewOf = (label: Element) => label.parentElement!;
+
+/**
+ * The scale a view's inline style holds, if any.
+ */
+const scaleOf = (view: Element) =>
+  (view as HTMLElement).style.getPropertyValue('transform');
+
+/**
+ * Presses and releases a view by touch, by mouse, and by a touch a scroll
+ * takes over, checking it scales down while pressed and back after each.
+ */
+const expectPressFeedback = (view: Element) => {
+  fireEvent.touchstart(view);
+  expect(scaleOf(view)).toBe('scale(0.97)');
+  fireEvent.touchend(view);
+  expect(scaleOf(view)).toBe('scale(1)');
+
+  fireEvent.touchstart(view);
+  fireEvent.touchcancel(view);
+  expect(scaleOf(view)).toBe('scale(1)');
+
+  // Lynx on the web fires mouse events for a cursor, never touch ones.
+  fireEvent.mousedown(view);
+  expect(scaleOf(view)).toBe('scale(0.97)');
+  fireEvent.mouseup(view);
+  expect(scaleOf(view)).toBe('scale(1)');
+
+  fireEvent.mousedown(view);
+  fireLynxEvent(view, 'mouseleave');
+  expect(scaleOf(view)).toBe('scale(1)');
+};
+
+/**
+ * Presses a disabled view by touch and by mouse: it shouldn't scale.
+ */
+const expectNoPressFeedback = (view: Element) => {
+  fireEvent.touchstart(view);
+  fireEvent.mousedown(view);
+  expect(scaleOf(view)).toBe('');
+  fireEvent.touchend(view);
+  fireEvent.mouseup(view);
+  expect(scaleOf(view)).toBe('');
+};
 
-  it('onTap flips the pressed model', async () => {
-    const { componentRef } = await render(UiToggle);
-    const inst = componentRef.instance as unknown as UiToggle & {
-      onTap: () => void;
+describe('UiToggle', () => {
+  const renderToggle = async () => {
+    const result = await render(ToggleHost);
+    return {
+      ...result,
+      host: result.componentRef.instance as ToggleHost,
+      toggle: () => viewOf(result.getByText('Bold')),
     };
-    inst.onTap();
-    expect(inst.pressed()).toBe(true);
-    inst.onTap();
-    expect(inst.pressed()).toBe(false);
+  };
+
+  it('renders its content unpressed, with the given class', async () => {
+    const { toggle } = await renderToggle();
+    expect(toggle().classList).toContain('bg-transparent');
+    expect(toggle().classList).toContain('h-10');
+    expect(toggle().classList).toContain('w-20');
+    expect(toggle().classList).not.toContain('opacity-50');
   });
 
-  it('onTap is a no-op when disabled', async () => {
-    const { componentRef } = await render(UiToggle);
-    const inst = componentRef.instance as unknown as UiToggle & {
-      onTap: () => void;
-    };
-    setInputSignal(inst.disabled, true);
+  it('flips `pressed` and its highlight on each tap', async () => {
+    const { host, toggle } = await renderToggle();
+    fireEvent.tap(toggle());
+    await waitForUpdate();
+    expect(host.bold()).toBe(true);
+    expect(toggle().classList).toContain('bg-accent');
+
+    fireEvent.tap(toggle());
     await waitForUpdate();
-    inst.onTap();
-    expect(inst.pressed()).toBe(false);
+    expect(host.bold()).toBe(false);
+    expect(toggle().classList).toContain('bg-transparent');
   });
 
-  it('press handlers run cleanly (enabled + disabled)', async () => {
-    const { componentRef } = await render(UiToggle);
-    const inst = componentRef.instance as unknown as UiToggle & {
-      onPressStart: () => void;
-      onPressEnd: () => void;
-      onPressCancel: () => void;
-    };
-    expect(() => inst.onPressStart()).not.toThrow();
-    expect(() => inst.onPressEnd()).not.toThrow();
-    expect(() => inst.onPressCancel()).not.toThrow();
-    setInputSignal((inst as unknown as UiToggle).disabled, true);
+  it('highlights when the app presses it', async () => {
+    const { host, toggle } = await renderToggle();
+    host.bold.set(true);
     await waitForUpdate();
-    expect(() => inst.onPressStart()).not.toThrow();
-    expect(() => inst.onPressEnd()).not.toThrow();
-    expect(() => inst.onPressCancel()).not.toThrow();
+    expect(toggle().classList).toContain('bg-accent');
   });
 
-  it('applies the accent background when pressed', async () => {
-    const { componentRef, container } = await render(UiToggle);
-    const inst = componentRef.instance as UiToggle;
-    inst.pressed.set(true);
+  it("dims and ignores taps while it's disabled", async () => {
+    const { host, toggle } = await renderToggle();
+    host.disabled.set(true);
     await waitForUpdate();
-    const view = container.querySelector('view');
-    expect(view?.getAttribute('class')).toContain('bg-accent');
+    expect(toggle().classList).toContain('opacity-50');
+    fireEvent.tap(toggle());
+    expect(host.bold()).toBe(false);
   });
 
-  it('applies outline variant and small size classes', async () => {
-    const { componentRef, container } = await render(UiToggle);
-    const inst = componentRef.instance as UiToggle;
-    setInputSignal(inst.variant, 'outline');
-    setInputSignal(inst.size, 'sm');
+  it('applies the classes for its variant and size', async () => {
+    const { host, toggle } = await renderToggle();
+    host.variant.set('outline');
+    host.size.set('sm');
     await waitForUpdate();
-    const view = container.querySelector('view');
-    expect(view?.getAttribute('class')).toContain('border-border');
-    expect(view?.getAttribute('class')).toContain('h-9');
+    expect(toggle().classList).toContain('border-border');
+    expect(toggle().classList).toContain('h-9');
+
+    host.size.set('lg');
+    await waitForUpdate();
+    expect(toggle().classList).toContain('h-11');
+  });
+
+  it('scales down while pressed, and back on release or cancel', async () => {
+    const { toggle } = await renderToggle();
+    expectPressFeedback(toggle());
   });
 
-  it('applies large size classes', async () => {
-    const { componentRef, container } = await render(UiToggle);
-    const inst = componentRef.instance as UiToggle;
-    setInputSignal(inst.size, 'lg');
+  it("doesn't react to presses while it's disabled", async () => {
+    const { host, toggle } = await renderToggle();
+    host.disabled.set(true);
     await waitForUpdate();
-    expect(container.querySelector('view')?.getAttribute('class')).toContain(
-      'h-11',
-    );
+    expectNoPressFeedback(toggle());
   });
 });
 
 describe('UiToggleGroup', () => {
-  it('single mode replaces selection and allows deselection', async () => {
-    const { componentRef } = await render(UiToggleGroup);
-    const inst = componentRef.instance as UiToggleGroup;
-    inst.toggle('a');
-    expect(inst.value()).toEqual(['a']);
-    inst.toggle('b');
-    expect(inst.value()).toEqual(['b']);
-    // Tap active item again to deselect (unique to single-mode).
-    inst.toggle('b');
-    expect(inst.value()).toEqual([]);
-  });
+  const renderGroup = async () => {
+    const result = await render(ToggleGroupHost);
+    return {
+      ...result,
+      host: result.componentRef.instance as ToggleGroupHost,
+      group: () => result.container.querySelector('.gap-1')!,
+      item: (label: string) => viewOf(result.getByText(label)),
+    };
+  };
 
-  it('multiple mode toggles individual items', async () => {
-    const { componentRef } = await render(UiToggleGroup);
-    const inst = componentRef.instance as UiToggleGroup;
-    setInputSignal(inst.type, 'multiple');
+  /**
+   * Taps an item, then lets the selection reach its highlight.
+   */
+  const tap = async (item: Element) => {
+    fireEvent.tap(item);
     await waitForUpdate();
-    inst.toggle('a');
-    inst.toggle('b');
-    expect(inst.value()).toEqual(['a', 'b']);
-    inst.toggle('a');
-    expect(inst.value()).toEqual(['b']);
+  };
+
+  it('lays its items out in a row, with the given class', async () => {
+    const { group } = await renderGroup();
+    expect(group().classList).toContain('flex-row');
+    expect(group().classList).toContain('w-full');
   });
 
-  it('toggle() is a no-op when the group is disabled', async () => {
-    const { componentRef } = await render(UiToggleGroup);
-    const inst = componentRef.instance as UiToggleGroup;
-    setInputSignal(inst.disabled, true);
-    await waitForUpdate();
-    inst.toggle('a');
-    expect(inst.value()).toEqual([]);
+  it('selects one item at a time, and deselects it on a second tap', async () => {
+    const { host, item } = await renderGroup();
+    await tap(item('Left'));
+    expect(host.align()).toEqual(['left']);
+    expect(item('Left').classList).toContain('bg-accent');
+
+    await tap(item('Center'));
+    expect(host.align()).toEqual(['center']);
+    expect(item('Left').classList).toContain('bg-transparent');
+    expect(item('Center').classList).toContain('bg-accent');
+
+    // Unlike a radio group, a single toggle group can have nothing selected.
+    await tap(item('Center'));
+    expect(host.align()).toEqual([]);
+    expect(item('Center').classList).toContain('bg-transparent');
   });
 
-  it('isSelected reflects the current value list', async () => {
-    const { componentRef } = await render(UiToggleGroup);
-    const inst = componentRef.instance as UiToggleGroup;
-    inst.toggle('a');
-    expect(inst.isSelected('a')).toBe(true);
-    expect(inst.isSelected('b')).toBe(false);
+  it('toggles each item on its own when it allows multiple', async () => {
+    const { host, item } = await renderGroup();
+    host.type.set('multiple');
+    await waitForUpdate();
+
+    await tap(item('Left'));
+    await tap(item('Right'));
+    expect(host.align()).toEqual(['left', 'right']);
+
+    await tap(item('Left'));
+    expect(host.align()).toEqual(['right']);
+    expect(item('Left').classList).toContain('bg-transparent');
+    expect(item('Right').classList).toContain('bg-accent');
   });
-});
 
-describe('UiToggleGroupItem', () => {
-  const renderItem = async (
-    parentValue: string[] = [],
-    parentDisabled = false,
-  ) => {
-    const parentResult = await render(UiToggleGroup);
-    const parent = parentResult.componentRef.instance as UiToggleGroup;
-    if (parentValue.length) parent.value.set(parentValue);
-    if (parentDisabled) setInputSignal(parent.disabled, true);
+  it('highlights the items the app selects', async () => {
+    const { host, item } = await renderGroup();
+    host.align.set(['right']);
     await waitForUpdate();
+    expect(item('Right').classList).toContain('bg-accent');
+    expect(item('Left').classList).toContain('bg-transparent');
+  });
 
-    const itemResult = await render(UiToggleGroupItem, {
-      providers: [{ provide: UiToggleGroup, useValue: parent }],
-    });
-    const item = itemResult.componentRef.instance as UiToggleGroupItem;
-    setInputSignal(item.itemValue, 'a');
+  it('dims every item and ignores taps while disabled', async () => {
+    const { host, item } = await renderGroup();
+    host.disabled.set(true);
     await waitForUpdate();
-    return { parent, item, itemResult };
-  };
+    for (const label of ['Left', 'Center', 'Right']) {
+      expect(item(label).classList).toContain('opacity-50');
+      await tap(item(label));
+    }
+    expect(host.align()).toEqual([]);
+  });
 
-  it('onTap delegates to the parent group', async () => {
-    const { parent, item } = await renderItem();
-    (item as unknown as { onTap: () => void }).onTap();
-    expect(parent.value()).toEqual(['a']);
+  it("styles every item with the group's variant and size, and its own class", async () => {
+    const { host, item } = await renderGroup();
+    expect(item('Left').classList).toContain('h-10');
+    expect(item('Left').classList).toContain('flex-1');
+    expect(item('Left').classList).not.toContain('opacity-50');
+
+    host.variant.set('outline');
+    host.size.set('sm');
+    await waitForUpdate();
+    for (const label of ['Left', 'Center', 'Right']) {
+      expect(item(label).classList).toContain('border-border');
+      expect(item(label).classList).toContain('h-9');
+    }
   });
 
-  it('highlights when selected', async () => {
-    const { itemResult } = await renderItem(['a']);
-    const view = itemResult.container.querySelector('view');
-    expect(view?.getAttribute('class')).toContain('bg-accent');
+  it('scales an item down while pressed, and back on release or cancel', async () => {
+    const { item } = await renderGroup();
+    expectPressFeedback(item('Center'));
   });
 
-  it('press handlers run cleanly (enabled + disabled)', async () => {
-    const { item } = await renderItem();
-    const cast = item as unknown as {
-      onPressStart: () => void;
-      onPressEnd: () => void;
-      onPressCancel: () => void;
-    };
-    expect(() => cast.onPressStart()).not.toThrow();
-    expect(() => cast.onPressEnd()).not.toThrow();
-
-    const disabled = await renderItem([], true);
-    const cast2 = disabled.item as unknown as {
-      onPressStart: () => void;
-      onPressEnd: () => void;
-      onPressCancel: () => void;
-    };
-    expect(() => cast2.onPressStart()).not.toThrow();
-    expect(() => cast2.onPressEnd()).not.toThrow();
-    expect(() => cast2.onPressCancel()).not.toThrow();
+  it("doesn't react to presses while the group is disabled", async () => {
+    const { host, item } = await renderGroup();
+    host.disabled.set(true);
+    await waitForUpdate();
+    expectNoPressFeedback(item('Center'));
   });
 });