@blotch/dolan 0.0.0-stage → 22.2.1

package/dist/ui/components/spinner/spinner.ts

@@ -0,0 +1,83 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  input,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+const LOADER_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/></svg>`;
+
+const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
+
+@Component({
+  selector: 'ui-spinner',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  // SVG markup is passed via [attr.content] rather than as child elements.
+  // Lynx's native <svg> element can't contain child nodes in the flat element
+  // model — the renderer doesn't support nested SVG elements. Passing the full
+  // SVG markup string as the `content` attribute is the Lynx-native way to
+  // embed vector graphics.
+  template: `
+    <view #spinner [style]="sizeStyle()">
+      <svg [attr.content]="svgContent()" style="width: 100%; height: 100%;" />
+    </view>
+  `,
+})
+export class UiSpinner {
+  readonly size = input<'xs' | 'sm' | 'md' | 'lg'>('md');
+  readonly color = input<string | undefined>(undefined);
+
+  readonly spinnerRef = viewChild<ElementRef>('spinner');
+
+  constructor() {
+    effect(() => {
+      const el = this.spinnerRef()?.nativeElement;
+      // el.animate() is inert in jsdom (see animate.ts's transitionTransform
+      // rationale). The continuous rotation is exercised on-device.
+      /* v8 ignore start */
+      if (!el) return;
+      el.animate(
+        [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
+        {
+          duration: 1600,
+          iterations: Infinity,
+          easing: 'linear',
+        },
+      );
+      /* v8 ignore stop */
+    });
+  }
+
+  protected readonly svgContent = computed(() => {
+    const c = this.color();
+    if (c) {
+      // Lynx SVG elements don't inherit the CSS `color` property into their
+      // stroke attributes, so we substitute the literal `currentColor` in the
+      // SVG string rather than relying on `currentColor` propagation via CSS.
+      //
+      // Uses split().join() instead of String.prototype.replaceAll(). replaceAll
+      // is ES2021, but Lynx's main thread runs on PrimJS at an ES2019 target;
+      // because it's a runtime method (not syntax) the build's down-leveling does
+      // not polyfill it, so it simply doesn't exist there. Calling it throws
+      // "main-thread.js exception: not a function" from inside Angular change
+      // detection, which aborts the whole tick before Lynx flushes the element
+      // tree — so the spinner never paints, and the error count climbs on every
+      // render as each tick re-runs and re-throws. split/join is ES2019-safe and
+      // is preferred over `replace(/.../g)` here because the search term is a
+      // plain literal and needs no regex escaping.
+      return LOADER_SVG.split('currentColor').join(c);
+    }
+    return LOADER_SVG;
+  });
+
+  protected readonly sizeStyle = computed(() => {
+    const px = SIZE_MAP[this.size()];
+    return `width: ${px}px; height: ${px}px;`;
+  });
+}

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

@@ -0,0 +1 @@
+export { UiSwitch } from './switch';

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

@@ -0,0 +1,63 @@
+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 { UiSwitch } from './switch';
+
+describe('UiSwitch', () => {
+  it('renders in the off position by default', async () => {
+    const { container } = await render(UiSwitch);
+    expect(container).toBeTruthy();
+  });
+
+  it('toggle() flips checked and emits `changed`', async () => {
+    const { componentRef } = await render(UiSwitch);
+    const inst = componentRef.instance as UiSwitch;
+    const emitted: boolean[] = [];
+    inst.changed.subscribe((v) => emitted.push(v));
+
+    inst.toggle();
+    expect(inst.checked()).toBe(true);
+    inst.toggle();
+    expect(inst.checked()).toBe(false);
+    expect(emitted).toEqual([true, false]);
+  });
+
+  it('toggle() is a no-op when disabled', async () => {
+    const { componentRef } = await render(UiSwitch);
+    const inst = componentRef.instance as UiSwitch;
+    setInputSignal(inst.disabled, true);
+    const listener = vi.fn();
+    inst.changed.subscribe(listener);
+
+    inst.toggle();
+    expect(inst.checked()).toBe(false);
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it('positions the thumb differently in ON vs OFF state', async () => {
+    const { componentRef, container } = await render(UiSwitch);
+    const inst = componentRef.instance as UiSwitch;
+    let thumb = container.querySelectorAll('view')[1];
+    expect(thumb?.getAttribute('style')).toContain('translateX(2px)');
+
+    inst.checked.set(true);
+    await waitForUpdate();
+    thumb = container.querySelectorAll('view')[1];
+    expect(thumb?.getAttribute('style')).toContain('translateX(22px)');
+  });
+
+  it('applies opacity-50 when disabled and includes a user class', async () => {
+    // Covers the disabled=true branch of trackClass() (line 62) and the
+    // userClass() concatenation. Without a render + detectChanges cycle the
+    // computed never runs with disabled=true and the branch stays uncovered.
+    const { componentRef, container } = await render(UiSwitch);
+    const inst = componentRef.instance as UiSwitch;
+    setInputSignal(inst.disabled, true);
+    setInputSignal(inst.userClass, 'custom-cls');
+    await waitForUpdate();
+    const track = container.querySelectorAll('view')[0];
+    const cls = track?.getAttribute('class') ?? '';
+    expect(cls).toContain('opacity-50');
+    expect(cls).toContain('custom-cls');
+  });
+});

package/dist/ui/components/switch/switch.ts

@@ -0,0 +1,98 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  input,
+  model,
+  output,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { type AnimationHandle, springTranslateX } from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+/**
+ * Pixel offsets for the thumb within the 44px track.
+ *
+ * The thumb is positioned with a px-based `translateX`, so the track and thumb
+ * MUST be sized in px too (see the `w-[44px]`/`w-[20px]` arbitrary values in the
+ * templates below) — NOT with Tailwind's rem-based scale (`w-11`/`w-5`).
+ *
+ * Why: Tailwind's default width scale compiles to rem (`w-11` → `2.75rem`), and
+ * on Lynx `1rem` resolves against the root `<page>` font-size, which defaults to
+ * 14px (`DEFAULT_FONT_SIZE_DP`) — not the 16px browsers use. So `w-11` renders as
+ * 38.5px on device, not 44px. Mixing that rem-sized track with a px `translateX`
+ * made the ON thumb overshoot the right edge (it was offset 22px inside a 38.5px
+ * track). Sizing everything in px keeps the geometry self-consistent regardless
+ * of the ambient font-size.
+ *
+ * Track is 44px wide, 24px tall; thumb is 20px square. OFF: 2px from the left
+ * edge; ON: 2px from the right edge (44 - 20 - 2 = 22).
+ */
+const THUMB_OFFSET_OFF = 2;
+const THUMB_OFFSET_ON = 22;
+
+@Component({
+  selector: 'ui-switch',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="trackClass()" (bindtap)="toggle()">
+      <view #thumb [class]="thumbClass()" [style]="thumbPositionStyle()" />
+    </view>
+  `,
+})
+export class UiSwitch {
+  readonly checked = model(false);
+  readonly disabled = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly changed = output<boolean>();
+
+  readonly thumbRef = viewChild<ElementRef>('thumb');
+  #activeAnimation?: AnimationHandle;
+
+  protected readonly trackClass = computed(() =>
+    cn(
+      'h-[24px] w-[44px] flex-row items-center rounded-full flex',
+      this.checked() ? 'bg-primary' : 'bg-input',
+      this.disabled() && 'opacity-50',
+      this.userClass(),
+    ),
+  );
+
+  protected readonly thumbClass = computed(() =>
+    cn('h-[20px] w-[20px] rounded-full bg-background'),
+  );
+
+  protected readonly thumbPositionStyle = computed(
+    () =>
+      `transform: translateX(${this.checked() ? THUMB_OFFSET_ON : THUMB_OFFSET_OFF}px);`,
+  );
+
+  toggle(): void {
+    if (this.disabled()) return;
+
+    const thumb = this.thumbRef()?.nativeElement;
+    const wasChecked = this.checked();
+    const next = !wasChecked;
+
+    // springTranslateX calls thumb.animate() which is inert in jsdom (see
+    // animate.ts). The spring physics of the thumb is exercised on-device.
+    /* v8 ignore start */
+    if (thumb) {
+      this.#activeAnimation?.cancel();
+      const from = wasChecked ? THUMB_OFFSET_ON : THUMB_OFFSET_OFF;
+      const to = next ? THUMB_OFFSET_ON : THUMB_OFFSET_OFF;
+      // Spring translate with squish effect at midpoint
+      this.#activeAnimation = springTranslateX(thumb, from, to);
+    }
+    /* v8 ignore stop */
+
+    this.checked.set(next);
+    this.changed.emit(next);
+  }
+}

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

@@ -0,0 +1 @@
+export { UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent } from './tabs';

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

@@ -0,0 +1,199 @@
+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 } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UiTabs, UiTabsContent, UiTabsList, UiTabsTrigger } from './tabs';
+
+@Component({
+  standalone: true,
+  imports: [UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent, LYNX_ELEMENTS],
+  template: `
+    <ui-tabs [(value)]="value">
+      <ui-tabs-list>
+        <ui-tabs-trigger value="a">A</ui-tabs-trigger>
+        <ui-tabs-trigger value="b">B</ui-tabs-trigger>
+      </ui-tabs-list>
+      <ui-tabs-content value="a"><text>Panel A</text></ui-tabs-content>
+      <ui-tabs-content value="b"><text>Panel B</text></ui-tabs-content>
+    </ui-tabs>
+  `,
+})
+class TabsHost {
+  value = 'a';
+}
+
+describe('UiTabs', () => {
+  it('renders the tab triggers and the active panel', async () => {
+    const { getByText } = await render(TabsHost);
+    expect(getByText('A')).toBeTruthy();
+    expect(getByText('B')).toBeTruthy();
+    expect(getByText('Panel A')).toBeTruthy();
+  });
+
+  it('select() sets the model value and emits `changed`', async () => {
+    const { componentRef } = await render(UiTabs);
+    const inst = componentRef.instance as UiTabs;
+    const emitted: string[] = [];
+    inst.changed.subscribe((v) => emitted.push(v));
+    inst.select('x');
+    expect(inst.value()).toBe('x');
+    expect(emitted).toEqual(['x']);
+  });
+
+  it('registerTab() records tab order without duplicates', async () => {
+    const { componentRef } = await render(UiTabs);
+    const inst = componentRef.instance as UiTabs;
+    inst.registerTab('a');
+    inst.registerTab('b');
+    inst.registerTab('a'); // duplicate, should be ignored
+    // Seed the effect with a known previousValue so subsequent transitions
+    // exercise the direction-set branch (not the initial-run early return).
+    inst.value.set('a');
+    await waitForUpdate();
+    // a=0, b=1 → nextIndex > prevIndex → direction=1 (forward branch)
+    inst.value.set('b');
+    await waitForUpdate();
+    await waitForUpdate();
+    expect(inst.direction()).toBe(1);
+    // Reverse → direction=-1 (backward branch)
+    inst.value.set('a');
+    await waitForUpdate();
+    await waitForUpdate();
+    expect(inst.direction()).toBe(-1);
+  });
+
+  it('direction effect ignores unknown values', async () => {
+    // Covers the branch where prevIndex or nextIndex is -1.
+    const { componentRef } = await render(UiTabs);
+    const inst = componentRef.instance as UiTabs;
+    inst.value.set('unknown');
+    inst.value.set('also-unknown');
+    await waitForUpdate();
+    await waitForUpdate();
+    expect(inst.direction()).toBe(1); // unchanged from default
+  });
+
+  it('direction effect leaves direction alone when transitioning from unknown to known', async () => {
+    const { componentRef } = await render(UiTabs);
+    const inst = componentRef.instance as UiTabs;
+    inst.registerTab('a');
+    inst.registerTab('b');
+    inst.value.set('unknown');
+    await waitForUpdate();
+    inst.value.set('a');
+    await waitForUpdate();
+    expect(inst.direction()).toBe(1);
+  });
+
+  it('direction effect leaves direction alone when transitioning from known to unknown', async () => {
+    const { componentRef } = await render(UiTabs);
+    const inst = componentRef.instance as UiTabs;
+    inst.registerTab('a');
+    inst.registerTab('b');
+    inst.value.set('a');
+    await waitForUpdate();
+    inst.value.set('unknown');
+    await waitForUpdate();
+    expect(inst.direction()).toBe(1);
+  });
+});
+
+describe('UiTabsList', () => {
+  it('renders projected content with the list container class', async () => {
+    const { container } = await render(UiTabsList);
+    const view = container.querySelector('view');
+    expect(view?.getAttribute('class')).toContain('rounded-lg');
+  });
+});
+
+describe('UiTabsTrigger', () => {
+  const renderTrigger = async (activeValue = 'a') => {
+    const tabsResult = await render(UiTabs);
+    const tabs = tabsResult.componentRef.instance as UiTabs;
+    tabs.value.set(activeValue);
+
+    const triggerResult = await render(UiTabsTrigger, {
+      providers: [{ provide: UiTabs, useValue: tabs }],
+    });
+    const trigger = triggerResult.componentRef.instance as UiTabsTrigger;
+    setInputSignal(trigger.triggerValue, 'a');
+    const view = triggerResult.container.querySelector('view') as Element;
+    (trigger as unknown as { triggerRef: unknown }).triggerRef = signal({
+      nativeElement: view,
+    });
+    await waitForUpdate();
+    await waitForUpdate();
+    return { tabs, trigger, triggerResult };
+  };
+
+  it('select() delegates to the parent tabs', async () => {
+    const { tabs, trigger } = await renderTrigger('a');
+    trigger.select();
+    expect(tabs.value()).toBe('a');
+  });
+
+  it('effect runs the activation animation when active flips true', async () => {
+    // Active path — `#previousActive` starts undefined so the first flip
+    // exercises the initialization guard, and toggling activeValue drives the
+    // effect through both animate() branches.
+    const { tabs } = await renderTrigger('b');
+    // Switch tabs so trigger becomes active — activation branch.
+    tabs.value.set('a');
+    await waitForUpdate();
+    await waitForUpdate();
+    // Deactivation branch.
+    tabs.value.set('b');
+    await waitForUpdate();
+    await waitForUpdate();
+    expect(tabs.value()).toBe('b');
+  });
+});
+
+describe('UiTabsContent', () => {
+  it('runs the reveal + directional slide animations when active flips', async () => {
+    const tabsResult = await render(UiTabs);
+    const tabs = tabsResult.componentRef.instance as UiTabs;
+    tabs.registerTab('a');
+    tabs.registerTab('b');
+
+    const contentResult = await render(UiTabsContent, {
+      providers: [{ provide: UiTabs, useValue: tabs }],
+    });
+    const content = contentResult.componentRef.instance as UiTabsContent;
+    setInputSignal(content.contentValue, 'a');
+    const view = contentResult.container.querySelector('view') as Element;
+    (content as unknown as { contentRef: unknown }).contentRef = signal({
+      nativeElement: view,
+    });
+
+    // Activate — first render path (revealIn).
+    tabs.value.set('a');
+    await waitForUpdate();
+    // The effect schedules setTimeout(_, 0); wait one more tick for it.
+    await waitForUpdate();
+
+    // Switch off and back on — subsequent path (directionalSlideIn) with cancel.
+    tabs.value.set('b');
+    await waitForUpdate();
+    tabs.value.set('a');
+    await waitForUpdate();
+    await waitForUpdate();
+
+    expect(tabs.value()).toBe('a');
+  });
+
+  it('setTimeout body bails out when contentRef is undefined', async () => {
+    const tabsResult = await render(UiTabs);
+    const tabs = tabsResult.componentRef.instance as UiTabs;
+    const contentResult = await render(UiTabsContent, {
+      providers: [{ provide: UiTabs, useValue: tabs }],
+    });
+    const content = contentResult.componentRef.instance as UiTabsContent;
+    setInputSignal(content.contentValue, 'a');
+    tabs.value.set('a');
+    await waitForUpdate();
+    await waitForUpdate();
+    expect(tabs.value()).toBe('a');
+  });
+});