@blotch/dolan 22.2.2 → 22.2.4

package/dist/ui/components/tabs/tabs.ts

@@ -44,8 +44,10 @@ export class UiTabs {
   // When the active tab changes, we compare the old and new index in this
   // list to determine slide direction (1 = right, -1 = left). This creates
   // a spatial relationship: tabs feel like they're arranged left-to-right,
-  // with content sliding in from the direction of the selected tab.
-  readonly #tabOrder: string[] = [];
+  // with content sliding in from the direction of the selected tab. A Set
+  // keeps the order tabs first registered in and ignores a re-registration
+  // (a trigger re-created by `@if` or `@for`).
+  readonly #tabOrder = new Set<string>();
   #previousValue: string | undefined;
   readonly direction = signal<1 | -1>(1);
 
@@ -53,43 +55,38 @@ export class UiTabs {
     cn('flex-col flex', this.userClass()),
   );
 
-  constructor() {
-    // Reactively compute direction when the active value changes.
-    // This handles both internal select() calls and external model changes.
-    effect(() => {
-      const currentValue = this.value();
-      if (this.#previousValue === undefined) {
-        this.#previousValue = currentValue;
-        return;
-      }
-      // Defensive: signal dedupes same-value writes so the effect never re-runs
-      // with an unchanged `currentValue`. Kept for safety on-device.
-      /* v8 ignore next 1 */
-      if (currentValue === this.#previousValue) return;
-
-      const prevIndex = this.#tabOrder.indexOf(this.#previousValue);
-      const nextIndex = this.#tabOrder.indexOf(currentValue);
-      // The `prevIndex !== nextIndex` check is defensive — the earlier
-      // `if (currentValue === this.#previousValue) return;` guard makes an
-      // equal-index case unreachable in normal flow.
-      if (
-        prevIndex !== -1 &&
-        nextIndex !== -1 &&
-        /* v8 ignore next 1 */ prevIndex !== nextIndex
-      ) {
-        this.direction.set(nextIndex > prevIndex ? 1 : -1);
-      }
+  /**
+   * Computes the slide direction when the active value changes, whether from
+   * select() or from the model being set. 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 trackingDirection = effect(() => {
+    const currentValue = this.value();
+    if (this.#previousValue === undefined) {
       this.#previousValue = currentValue;
-    });
-  }
+      return;
+    }
+    // The value can change and change back before the effect runs (two taps
+    // in one frame): the tab didn't move, so the direction stays.
+    if (currentValue === this.#previousValue) return;
+
+    const order = [...this.#tabOrder];
+    const prevIndex = order.indexOf(this.#previousValue);
+    const nextIndex = order.indexOf(currentValue);
+    // A value with no trigger has no place in the order to slide from or to.
+    // Two different registered values always have different indexes.
+    if (prevIndex !== -1 && nextIndex !== -1) {
+      this.direction.set(nextIndex > prevIndex ? 1 : -1);
+    }
+    this.#previousValue = currentValue;
+  });
 
   /**
    * Called by UiTabsTrigger to register ordering for direction detection.
    */
   registerTab(value: string): void {
-    if (!this.#tabOrder.includes(value)) {
-      this.#tabOrder.push(value);
-    }
+    this.#tabOrder.add(value);
   }
 
   select(value: string): void {
@@ -143,7 +140,7 @@ export class UiTabsTrigger {
   readonly triggerValue = input.required<string>({ alias: 'value' });
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly triggerRef = viewChild<ElementRef>('trigger');
+  readonly triggerRef = viewChild.required<ElementRef>('trigger');
   #anim?: AnimationHandle;
   #previousActive?: boolean;
 
@@ -151,57 +148,52 @@ export class UiTabsTrigger {
     () => this.#tabs.value() === this.triggerValue(),
   );
 
-  constructor() {
-    // Register this trigger with the parent for direction detection
-    effect(() => {
-      this.#tabs.registerTab(this.triggerValue());
-    });
+  /** Registers this trigger with the parent for direction detection. */
+  protected readonly registering = effect(() => {
+    this.#tabs.registerTab(this.triggerValue());
+  });
 
-    // Animate trigger background on selection change
-    effect(() => {
-      const active = this.isActive();
-      const el = this.triggerRef()?.nativeElement;
-      if (!el || this.#previousActive === undefined) {
-        this.#previousActive = active;
-        return;
-      }
-      // Defensive: `isActive` computed dedupes same-value emissions so the
-      // effect never re-runs with an unchanged `active`. Kept for safety.
-      /* v8 ignore next 1 */
-      if (active === this.#previousActive) return;
-      this.#previousActive = active;
+  /** Animates the trigger's background when it's selected or deselected. */
+  protected readonly animatingSelection = effect(() => {
+    const active = this.isActive();
+    const el = this.triggerRef().nativeElement;
+    const wasActive = this.#previousActive;
+    this.#previousActive = active;
+    // The first run only records the starting state, and only a change has
+    // anything to animate. (`isActive` is a computed, so the effect only
+    // re-runs once it changes; the second check is a safeguard.)
+    if (wasActive === undefined || wasActive === active) return;
 
-      this.#anim?.cancel();
+    this.#anim?.cancel();
 
-      if (active) {
-        // Activation: spring-based scale + opacity for a lively entrance
-        this.#anim = el.animate(
-          [
-            { transform: 'scaleX(0.95)', opacity: 0.7 },
-            { transform: 'scaleX(1)', opacity: 1 },
-          ],
-          {
-            duration: DURATION.normal,
-            easing: EASING.springSubtle,
-            fill: 'forwards',
-          },
-        );
-      } else {
-        // Deactivation: quick shrink + fade for a graceful exit
-        this.#anim = el.animate(
-          [
-            { transform: 'scaleX(1)', opacity: 1 },
-            { transform: 'scaleX(0.97)', opacity: 0.7 },
-          ],
-          {
-            duration: DURATION.fast,
-            easing: EASING.accelerate,
-            fill: 'forwards',
-          },
-        );
-      }
-    });
-  }
+    if (active) {
+      // Activation: spring-based scale + opacity for a lively entrance
+      this.#anim = el.animate(
+        [
+          { transform: 'scaleX(0.95)', opacity: 0.7 },
+          { transform: 'scaleX(1)', opacity: 1 },
+        ],
+        {
+          duration: DURATION.normal,
+          easing: EASING.springSubtle,
+          fill: 'forwards',
+        },
+      );
+    } else {
+      // Deactivation: quick shrink + fade for a graceful exit
+      this.#anim = el.animate(
+        [
+          { transform: 'scaleX(1)', opacity: 1 },
+          { transform: 'scaleX(0.97)', opacity: 0.7 },
+        ],
+        {
+          duration: DURATION.fast,
+          easing: EASING.accelerate,
+          fill: 'forwards',
+        },
+      );
+    }
+  });
 
   protected readonly triggerClass = computed(() =>
     cn(
@@ -263,7 +255,7 @@ export class UiTabsContent {
   readonly contentValue = input.required<string>({ alias: 'value' });
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly contentRef = viewChild<ElementRef>('content');
+  readonly contentRef = viewChild.required<ElementRef>('content');
   #anim?: AnimationHandle;
   #isFirstRender = true;
 
@@ -271,43 +263,43 @@ export class UiTabsContent {
     () => this.#tabs.value() === this.contentValue(),
   );
 
-  constructor() {
-    // Animate content reveal when tab becomes active.
-    //
-    // The panel is ALWAYS rendered and shown/hidden via the host's `display`
-    // (see the `host` block) rather than wrapped in `@if`. On Lynx, destroying a
-    // subtree that holds projected `<ng-content>` sends that content through the
-    // renderer's "park on the page root" path (it must keep still-alive
-    // projected nodes from dying), which drops inactive panels at the bottom of
-    // the page and made re-showing them unreliable — the symptom was tab content
-    // that vanished and never came back. Keeping every panel mounted and only
-    // toggling `display` never destroys or re-parents anything: inactive panels
-    // collapse to 0×0 (Lynx `display: none`) so they take no space, and the
-    // active one simply reappears in place.
-    effect(() => {
-      if (!this.isActive()) return;
-      // Defer one tick so the display flip to 'flex' has applied before we animate.
-      setTimeout(() => {
-        const el = this.contentRef()?.nativeElement;
-        if (!el) return;
+  /**
+   * Animates the content's reveal when its tab becomes active.
+   *
+   * The panel is ALWAYS rendered and shown/hidden via the host's `display`
+   * (see the `host` block) rather than wrapped in `@if`. On Lynx, destroying a
+   * subtree that holds projected `<ng-content>` sends that content through the
+   * renderer's "park on the page root" path (it must keep still-alive
+   * projected nodes from dying), which drops inactive panels at the bottom of
+   * the page and made re-showing them unreliable — the symptom was tab content
+   * that vanished and never came back. Keeping every panel mounted and only
+   * toggling `display` never destroys or re-parents anything: inactive panels
+   * collapse to 0×0 (Lynx `display: none`) so they take no space, and the
+   * active one simply reappears in place. That also means the content view
+   * always exists, so `contentRef` is required.
+   */
+  protected readonly revealing = effect(() => {
+    if (!this.isActive()) return;
+    // Defer one tick so the display flip to 'flex' has applied before we animate.
+    setTimeout(() => {
+      const el = this.contentRef().nativeElement;
 
-        this.#anim?.cancel();
+      this.#anim?.cancel();
 
-        if (this.#isFirstRender) {
-          // First render: subtle vertical reveal (no directional context yet)
-          this.#isFirstRender = false;
-          this.#anim = revealIn(el, { fromY: 6, duration: DURATION.normal });
-        } else {
-          // Subsequent renders: direction-aware horizontal slide
-          const dir = this.#tabs.direction();
-          this.#anim = directionalSlideIn(el, dir, {
-            distance: 24,
-            duration: 300,
-          });
-        }
-      }, 0);
-    });
-  }
+      if (this.#isFirstRender) {
+        // First render: subtle vertical reveal (no directional context yet)
+        this.#isFirstRender = false;
+        this.#anim = revealIn(el, { fromY: 6, duration: DURATION.normal });
+      } else {
+        // Subsequent renders: direction-aware horizontal slide
+        const dir = this.#tabs.direction();
+        this.#anim = directionalSlideIn(el, dir, {
+          distance: 24,
+          duration: 300,
+        });
+      }
+    }, 0);
+  });
 
   // Visibility is controlled at the host (see `host` block); the inner view is
   // always a normal flex column that fills the shown host.

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

@@ -1,115 +1,236 @@
-import { signal } from '@angular/core';
-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 { UiTextarea } from './textarea';
 
+@Component({
+  imports: [UiTextarea],
+  template: `
+    <ui-textarea
+      [(value)]="notes"
+      [label]="label()"
+      placeholder="Add a note"
+      [helperText]="helperText()"
+      [error]="error()"
+      [disabled]="disabled()"
+      [minLines]="minLines()"
+      [maxLines]="maxLines()"
+      class="w-full"
+      (changed)="changes.push($event)"
+      (focused)="events.push('focused')"
+      (blurred)="events.push('blurred')"
+    />
+  `,
+})
+class TextareaHost {
+  readonly notes = signal('');
+  readonly label = signal('');
+  readonly helperText = signal('');
+  readonly error = signal('');
+  readonly disabled = signal(false);
+  readonly minLines = signal(3);
+  readonly maxLines = signal<number | undefined>(undefined);
+  readonly changes: string[] = [];
+  readonly events: string[] = [];
+}
+
+const renderTextarea = async () => {
+  const result = await render(TextareaHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as TextareaHost,
+    field: () => result.container.querySelector('textarea')!,
+    // The field's own column; the host element renders as a view too.
+    column: () => result.container.querySelector('.flex-col')!,
+    wrapper: () => result.container.querySelector('.bg-muted') as HTMLElement,
+    // The layer that draws the focus ring around the field.
+    ring: () => result.container.querySelector('.absolute') as HTMLElement,
+  };
+};
+
+/** `__ElementAnimate`'s first argument for starting an animation. */
+const START = 0;
+/** `__ElementAnimate`'s first argument for canceling an animation. */
+const CANCEL = 3;
+
 describe('UiTextarea', () => {
-  it('renders with default configuration', async () => {
-    const { container } = await render(UiTextarea);
-    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('onInput() updates the model and emits `changed`', async () => {
-    const { componentRef } = await render(UiTextarea);
-    const inst = componentRef.instance as unknown as UiTextarea & {
-      onInput: (e: { detail: { value: string } }) => void;
-    };
-    const emitted: string[] = [];
-    inst.changed.subscribe((v) => emitted.push(v));
-    inst.onInput({ detail: { value: 'hello' } });
-    expect(inst.value()).toBe('hello');
-    expect(emitted).toEqual(['hello']);
+  it('renders a native textarea with its placeholder, and no label', async () => {
+    const { field, column, queryByText } = await renderTextarea();
+    expect(field().getAttribute('placeholder')).toBe('Add a note');
+    expect(column().classList).toContain('w-full');
+    expect(queryByText('Add a note')).toBeNull();
   });
 
-  it('onInput() is a no-op when disabled', async () => {
-    const { componentRef } = await render(UiTextarea);
-    const inst = componentRef.instance as unknown as UiTextarea & {
-      onInput: (e: { detail: { value: string } }) => void;
-    };
-    setInputSignal(inst.disabled, true);
-    const emitted = vi.fn();
-    inst.changed.subscribe(emitted);
-    inst.onInput({ detail: { value: 'blocked' } });
-    expect(inst.value()).toBe('');
-    expect(emitted).not.toHaveBeenCalled();
+  it('shows its label', async () => {
+    const { host, getByText } = await renderTextarea();
+    host.label.set('Notes');
+    await waitForUpdate();
+    expect(getByText('Notes').classList).toContain('font-medium');
   });
 
-  it('onFocus/onBlur emit and update state', async () => {
-    const { componentRef } = await render(UiTextarea);
-    const inst = componentRef.instance as unknown as UiTextarea & {
-      onFocus: () => void;
-      onBlur: () => void;
-    };
-    const focused = vi.fn();
-    const blurred = vi.fn();
-    inst.focused.subscribe(focused);
-    inst.blurred.subscribe(blurred);
-    inst.onFocus();
-    inst.onBlur();
-    expect(focused).toHaveBeenCalledTimes(1);
-    expect(blurred).toHaveBeenCalledTimes(1);
+  it('updates `value` and emits `changed` as the user types', async () => {
+    const { host, field } = await renderTextarea();
+    // Lynx puts the typed text in the event's detail, not on its target.
+    fireEvent.input(field(), { detail: { value: 'Call' } });
+    fireEvent.input(field(), { detail: { value: 'Call Sam' } });
+    expect(host.notes()).toBe('Call Sam');
+    expect(host.changes).toEqual(['Call', 'Call Sam']);
   });
 
-  it('error input triggers the shake effect', async () => {
-    // Same pattern as UiInput: JIT + jsdom doesn't populate template-ref
-    // viewChild queries. Monkey-patch containerRef so the effect body's `el`
-    // check passes and the shake path executes.
-    const { componentRef, container } = await render(UiTextarea);
-    const inst = componentRef.instance as UiTextarea;
-    const view = container.querySelector('view') as Element;
-    (inst as unknown as { containerRef: unknown }).containerRef = signal({
-      nativeElement: view,
-    });
-    setInputSignal(inst.error, 'Too short');
+  it('hides its placeholder while it has a value', async () => {
+    // Lynx's iOS textarea would otherwise draw the placeholder over a value
+    // the app sets.
+    const { host, field } = await renderTextarea();
+    host.notes.set('Call Sam');
     await waitForUpdate();
+    expect(field().hasAttribute('placeholder')).toBe(false);
+
+    host.notes.set('');
     await waitForUpdate();
-    expect(container.textContent).toContain('Too short');
-    // Clear then re-trigger to cover the cancel path.
-    setInputSignal(inst.error, '');
+    expect(field().getAttribute('placeholder')).toBe('Add a note');
+  });
+
+  it("dims and ignores typing while it's disabled", async () => {
+    const { host, field, wrapper } = await renderTextarea();
+    host.disabled.set(true);
     await waitForUpdate();
+    expect(wrapper().classList).toContain('opacity-50');
+
+    fireEvent.input(field(), { detail: { value: 'blocked' } });
+    expect(host.notes()).toBe('');
+    expect(host.changes).toEqual([]);
+  });
+
+  it('disables the native textarea only while disabled', async () => {
+    // Lynx treats any `disabled` value, even false, as disabled, so the
+    // attribute has to go rather than be set to false.
+    const setAttribute = vi.spyOn(lynxMainThread(), '__SetAttribute');
+    const { host, field } = await renderTextarea();
+    expect(setAttribute).not.toHaveBeenCalledWith(
+      field(),
+      'disabled',
+      expect.anything(),
+    );
+
+    host.disabled.set(true);
+    await waitForUpdate();
+    expect(setAttribute).toHaveBeenLastCalledWith(field(), 'disabled', 'true');
+    setAttribute.mockRestore();
+  });
+
+  it('shows a focus ring while focused, and emits `focused` and `blurred`', async () => {
+    const { host, field, ring } = await renderTextarea();
+    expect(ring().style.getPropertyValue('opacity')).toBe('0');
+
+    fireEvent.focus(field());
     await waitForUpdate();
-    setInputSignal(inst.error, 'Retry');
+    expect(ring().style.getPropertyValue('opacity')).toBe('1');
+    expect(ring().style.getPropertyValue('box-shadow')).toContain(
+      'var(--ring)',
+    );
+
+    fireEvent.blur(field());
     await waitForUpdate();
+    expect(ring().style.getPropertyValue('opacity')).toBe('0');
+    expect(host.events).toEqual(['focused', 'blurred']);
+  });
+
+  it('shows its helper text', async () => {
+    const { host, getByText } = await renderTextarea();
+    host.helperText.set('Only you can see this.');
     await waitForUpdate();
-    expect(container.textContent).toContain('Retry');
+    expect(getByText('Only you can see this.').classList).toContain(
+      'text-muted-foreground',
+    );
   });
 
-  it('renders helper text when no error is present', async () => {
-    const { componentRef, container } = await render(UiTextarea);
-    const inst = componentRef.instance as UiTextarea;
-    setInputSignal(inst.helperText, 'Notes here');
+  it('shows an error in place of the helper text, with a destructive ring', async () => {
+    const { host, ring, getByText, queryByText } = await renderTextarea();
+    host.helperText.set('Only you can see this.');
+    host.error.set('Too short');
     await waitForUpdate();
-    expect(container.textContent).toContain('Notes here');
+    expect(getByText('Too short').classList).toContain('text-destructive');
+    expect(queryByText('Only you can see this.')).toBeNull();
+    // An invalid field keeps its ring even when it isn't focused.
+    expect(ring().style.getPropertyValue('opacity')).toBe('1');
+    expect(ring().style.getPropertyValue('box-shadow')).toContain(
+      'var(--destructive)',
+    );
   });
 
-  it('renders the label when provided', async () => {
-    const { componentRef, container } = await render(UiTextarea);
-    const inst = componentRef.instance as UiTextarea;
-    setInputSignal(inst.label, 'Description');
+  it('shakes when an error appears, but not when it only changes', async () => {
+    const { host, column } = await renderTextarea();
+    const shakes = () =>
+      animate.mock.calls.filter(([, [action]]) => action === START);
+    expect(shakes()).toEqual([]);
+
+    host.error.set('Required');
+    await waitForUpdate();
+    expect(animate).toHaveBeenCalledWith(column(), [
+      START,
+      expect.any(String),
+      expect.arrayContaining([{ transform: 'translateX(-4px)' }]),
+      expect.anything(),
+    ]);
+    expect(shakes()).toHaveLength(1);
+
+    host.error.set('Too short');
     await waitForUpdate();
-    expect(container.textContent).toContain('Description');
+    expect(shakes()).toHaveLength(1);
+
+    // Once fixed, the next error shakes again, replacing the last shake.
+    host.error.set('');
+    await waitForUpdate();
+    host.error.set('Required');
+    await waitForUpdate();
+    expect(shakes()).toHaveLength(2);
+    expect(animate).toHaveBeenCalledWith(column(), [
+      CANCEL,
+      expect.any(String),
+    ]);
   });
 
-  it('computes a min-height wrapper style when only minLines is set', async () => {
-    // Exercises the `max != null ? ... : ''` false branch of wrapperStyle.
-    const { componentRef, container } = await render(UiTextarea);
-    const inst = componentRef.instance as UiTextarea;
-    setInputSignal(inst.minLines, 5);
+  it('opens at minLines tall and grows without limit by default', async () => {
+    // Each line is 20px, plus 20px of vertical padding.
+    const { host, field, wrapper } = await renderTextarea();
+    expect(wrapper().style.getPropertyValue('min-height')).toBe('80px');
+    expect(wrapper().style.getPropertyValue('max-height')).toBe('');
+    expect(field().hasAttribute('enable-scroll-bar')).toBe(false);
+
+    host.minLines.set(5);
     await waitForUpdate();
-    // 5 * 20 + 20 = 120px
-    const wrapper = container.querySelector('[style*="min-height"]');
-    expect(wrapper?.getAttribute('style')).toContain('min-height: 120px');
-    expect(wrapper?.getAttribute('style')).not.toContain('max-height');
+    expect(wrapper().style.getPropertyValue('min-height')).toBe('120px');
   });
 
-  it('adds max-height to wrapper style when maxLines is set', async () => {
-    const { componentRef, container } = await render(UiTextarea);
-    const inst = componentRef.instance as UiTextarea;
-    setInputSignal(inst.maxLines, 4);
+  it('stops growing at maxLines and shows a scroll bar', async () => {
+    const { host, field, wrapper } = await renderTextarea();
+    host.maxLines.set(4);
     await waitForUpdate();
-    const wrapper = container.querySelector('[style*="max-height"]');
-    expect(wrapper?.getAttribute('style')).toContain('max-height: 100px');
+    expect(wrapper().style.getPropertyValue('max-height')).toBe('100px');
+    expect(field().getAttribute('enable-scroll-bar')).toBe('true');
   });
 
   it('makes the wrapper a stacking context so the field scrolls with it', async () => {
@@ -117,22 +238,7 @@ describe('UiTextarea', () => {
     // when an ancestor inside the scroll content is a stacking context. Without
     // z-0 on the wrapper, the native field (and its placeholder) stays fixed on
     // screen while the page scrolls.
-    const { container } = await render(UiTextarea);
-    const wrapper = container.querySelector(
-      '[class*="rounded-xl"][class*="bg-muted"]',
-    );
-    expect(wrapper?.getAttribute('class')?.split(/\s+/)).toContain('z-0');
-  });
-
-  it('applies the disabled dim class when disabled', async () => {
-    // Covers the true branch of `disabled() && 'opacity-50'` in textareaWrapperClass.
-    const { componentRef, container } = await render(UiTextarea);
-    const inst = componentRef.instance as UiTextarea;
-    setInputSignal(inst.disabled, true);
-    await waitForUpdate();
-    const wrapper = container.querySelector(
-      '[class*="rounded-xl"][class*="bg-muted"]',
-    );
-    expect(wrapper?.getAttribute('class')).toContain('opacity-50');
+    const { wrapper } = await renderTextarea();
+    expect(wrapper().classList).toContain('z-0');
   });
 });