@blotch/dolan 0.0.0-stage → 22.2.0

package/dist/ui/components/pagination/pagination.ts

@@ -0,0 +1,147 @@
+import {
+  Component,
+  ViewEncapsulation,
+  computed,
+  input,
+  model,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { cn } from '../../utils/cn';
+
+const CHEVRON_LEFT = `<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="m15 18-6-6 6-6"/></svg>`;
+const CHEVRON_RIGHT = `<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="m9 18 6-6-6-6"/></svg>`;
+
+@Component({
+  selector: 'ui-pagination',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <view [class]="navButtonClass(page() <= 1)" (bindtap)="prev()">
+        <svg
+          [attr.content]="chevronLeftSvg"
+          style="width: 16px; height: 16px;"
+        />
+      </view>
+
+      @for (item of visiblePages(); track item.key) {
+        @if (item.type === 'page') {
+          <view
+            [class]="pageButtonClass(item.value === page())"
+            (bindtap)="goTo(item.value)"
+          >
+            <text [class]="pageTextClass(item.value === page())">{{
+              item.value
+            }}</text>
+          </view>
+        } @else {
+          <view class="h-8 w-8 items-center flex justify-center">
+            <text class="text-xs text-muted-foreground">...</text>
+          </view>
+        }
+      }
+
+      <view [class]="navButtonClass(page() >= totalPages())" (bindtap)="next()">
+        <svg
+          [attr.content]="chevronRightSvg"
+          style="width: 16px; height: 16px;"
+        />
+      </view>
+    </view>
+  `,
+})
+export class UiPagination {
+  readonly page = model(1);
+  readonly totalPages = input.required<number>();
+  readonly siblingCount = input(1);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly chevronLeftSvg = CHEVRON_LEFT;
+  protected readonly chevronRightSvg = CHEVRON_RIGHT;
+
+  // Sliding-window pagination algorithm:
+  // Always shows page 1 and the last page. Around the current page, shows
+  // `siblingCount` neighbors on each side. If there's a gap between page 1
+  // and the window (or window and last page), an ellipsis is inserted.
+  // The threshold `5 + siblings * 2` is the max pages that fit without
+  // truncation: first + last + up to (2*siblings+1) window + 2 ellipsis slots.
+  protected readonly visiblePages = computed(() => {
+    const total = this.totalPages();
+    const current = this.page();
+    const siblings = this.siblingCount();
+
+    if (total <= 5 + siblings * 2) {
+      return Array.from({ length: total }, (_, i) => ({
+        type: 'page' as const,
+        value: i + 1,
+        key: `p${i + 1}`,
+      }));
+    }
+
+    const items: { type: 'page' | 'ellipsis'; value: number; key: string }[] =
+      [];
+
+    items.push({ type: 'page', value: 1, key: 'p1' });
+
+    const rangeStart = Math.max(2, current - siblings);
+    const rangeEnd = Math.min(total - 1, current + siblings);
+
+    if (rangeStart > 2) {
+      items.push({ type: 'ellipsis', value: 0, key: 'el' });
+    }
+
+    for (let i = rangeStart; i <= rangeEnd; i++) {
+      items.push({ type: 'page', value: i, key: `p${i}` });
+    }
+
+    if (rangeEnd < total - 1) {
+      items.push({ type: 'ellipsis', value: 0, key: 'er' });
+    }
+
+    items.push({ type: 'page', value: total, key: `p${total}` });
+    return items;
+  });
+
+  protected readonly containerClass = computed(() =>
+    cn('flex-row items-center gap-1 flex', this.userClass()),
+  );
+
+  protected navButtonClass(disabled: boolean): string {
+    return cn(
+      'h-10 w-10 items-center rounded-md flex justify-center',
+      disabled && 'opacity-50',
+    );
+  }
+
+  protected pageButtonClass(active: boolean): string {
+    return cn(
+      'h-10 w-10 items-center rounded-md flex justify-center',
+      active ? 'bg-primary' : 'bg-transparent',
+    );
+  }
+
+  protected pageTextClass(active: boolean): string {
+    return cn(
+      'text-sm font-medium',
+      active ? 'text-primary-foreground' : 'text-foreground',
+    );
+  }
+
+  protected prev(): void {
+    if (this.page() > 1) {
+      this.page.update((p) => p - 1);
+    }
+  }
+
+  protected next(): void {
+    if (this.page() < this.totalPages()) {
+      this.page.update((p) => p + 1);
+    }
+  }
+
+  protected goTo(p: number): void {
+    this.page.set(p);
+  }
+}

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

@@ -0,0 +1 @@
+export { UiProgress } from './progress';

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

@@ -0,0 +1,71 @@
+import { Component } 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 { UiProgress } from './progress';
+
+@Component({
+  standalone: true,
+  imports: [UiProgress, LYNX_ELEMENTS],
+  template: `<ui-progress [value]="value" [indeterminate]="indeterminate" />`,
+})
+class ProgressHost {
+  value = 40;
+  indeterminate = false;
+}
+
+describe('UiProgress', () => {
+  it('renders at the given value', async () => {
+    const { container } = await render(ProgressHost);
+    expect(container).toBeTruthy();
+  });
+
+  it('renders indeterminate mode without throwing', async () => {
+    @Component({
+      standalone: true,
+      imports: [UiProgress, LYNX_ELEMENTS],
+      template: `<ui-progress [indeterminate]="true" />`,
+    })
+    class IndeterminateHost {}
+    const { container } = await render(IndeterminateHost);
+    expect(container).toBeTruthy();
+  });
+
+  it('scales the fill width by the value/max ratio', async () => {
+    // JIT template bindings are inert against input(); drive the signals so
+    // the percent/fillStyle computed signals actually run.
+    const { componentRef, container } = await render(UiProgress);
+    setInputSignal((componentRef.instance as UiProgress).value, 25);
+    setInputSignal((componentRef.instance as UiProgress).max, 100);
+    await waitForUpdate();
+    const fill = container.querySelectorAll('view')[1];
+    expect(fill?.getAttribute('style')).toContain('width: 25%');
+  });
+
+  it('clamps the fill to 100% when the value exceeds max', async () => {
+    const { componentRef, container } = await render(UiProgress);
+    setInputSignal((componentRef.instance as UiProgress).value, 500);
+    setInputSignal((componentRef.instance as UiProgress).max, 100);
+    await waitForUpdate();
+    const fill = container.querySelectorAll('view')[1];
+    expect(fill?.getAttribute('style')).toContain('width: 100%');
+  });
+
+  it('clamps the fill to 0% when max is zero (division safety)', async () => {
+    const { componentRef, container } = await render(UiProgress);
+    setInputSignal((componentRef.instance as UiProgress).value, 50);
+    setInputSignal((componentRef.instance as UiProgress).max, 0);
+    await waitForUpdate();
+    const fill = container.querySelectorAll('view')[1];
+    expect(fill?.getAttribute('style')).toContain('width: 0%');
+  });
+
+  it('uses the fixed 40% fill width when indeterminate is true', async () => {
+    const { componentRef, container } = await render(UiProgress);
+    setInputSignal((componentRef.instance as UiProgress).indeterminate, true);
+    await waitForUpdate();
+    const fill = container.querySelectorAll('view')[1];
+    expect(fill?.getAttribute('style')).toContain('width: 40%');
+  });
+});

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

@@ -0,0 +1,118 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  input,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { type AnimationHandle, DURATION, EASING } from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-progress',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="trackClass()">
+      <view #fill [class]="fillClass()" [style]="fillStyle()" />
+    </view>
+  `,
+})
+export class UiProgress {
+  readonly value = input(0);
+  readonly max = input(100);
+  /**
+   * When true, shows an indeterminate (looping) animation
+   */
+  readonly indeterminate = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly fillRef = viewChild<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;
+
+      this.#fillAnim?.cancel();
+      this.#fillAnim = el.animate(
+        [{ width: `${this.#previousPercent}%` }, { width: `${percent}%` }],
+        { duration: DURATION.slow, easing: EASING.standard, fill: 'forwards' },
+      );
+      this.#previousPercent = percent;
+      /* v8 ignore stop */
+    });
+  }
+
+  protected readonly percent = computed(() => {
+    const m = this.max();
+    if (m <= 0) return 0;
+    return Math.min(100, Math.max(0, (this.value() / m) * 100));
+  });
+
+  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).
+      'h-2 w-full rounded-full bg-muted overflow-hidden',
+      this.userClass(),
+    ),
+  );
+
+  protected readonly fillClass = computed(() =>
+    cn('h-full rounded-full bg-primary'),
+  );
+
+  protected readonly fillStyle = computed(() =>
+    this.indeterminate() ? 'width: 40%;' : `width: ${this.percent()}%;`,
+  );
+}

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

@@ -0,0 +1 @@
+export { UiRadioGroup, UiRadioGroupItem } from './radio-group';

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

@@ -0,0 +1,115 @@
+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 { UiRadioGroup, UiRadioGroupItem } from './radio-group';
+
+@Component({
+  standalone: true,
+  imports: [UiRadioGroup, UiRadioGroupItem, LYNX_ELEMENTS],
+  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>
+  `,
+})
+class RadioGroupHost {
+  value = 'a';
+}
+
+describe('UiRadioGroup', () => {
+  it('renders each radio item', async () => {
+    const { getByText } = await render(RadioGroupHost);
+    expect(getByText('A')).toBeTruthy();
+    expect(getByText('B')).toBeTruthy();
+  });
+
+  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('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();
+  });
+});
+
+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');
+    await waitForUpdate();
+
+    item.select();
+    expect(parent.value()).toBe('a');
+  });
+
+  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);
+
+    const itemResult = await render(UiRadioGroupItem, {
+      providers: [{ provide: UiRadioGroup, useValue: parent }],
+    });
+    const item = itemResult.componentRef.instance as UiRadioGroupItem;
+    setInputSignal(item.itemValue, 'a');
+    await waitForUpdate();
+
+    item.select();
+    expect(parent.value()).toBe('');
+  });
+
+  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,
+    });
+    await waitForUpdate();
+
+    // Effect first run initializes `#previousSelected`, then returns.
+    // Select => popIn branch.
+    parent.value.set('a');
+    await waitForUpdate();
+    // Deselect => popOut branch.
+    parent.value.set('b');
+    await waitForUpdate();
+    expect(parent.value()).toBe('b');
+  });
+});

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

@@ -0,0 +1,129 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  inject,
+  input,
+  model,
+  output,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { type AnimationHandle, popIn, popOut } from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-radio-group',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiRadioGroup {
+  readonly value = model<string>('');
+  readonly disabled = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly changed = output<string>();
+
+  protected readonly containerClass = computed(() =>
+    cn('flex-col gap-2 flex', this.userClass()),
+  );
+
+  select(value: string): void {
+    if (this.disabled()) return;
+    this.value.set(value);
+    this.changed.emit(value);
+  }
+}
+
+@Component({
+  selector: 'ui-radio-group-item',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="itemClass()" (bindtap)="select()">
+      <view [class]="circleClass()">
+        <view
+          #dot
+          [class]="dotClass()"
+          [style]="
+            isSelected() ? 'opacity: 1;' : 'opacity: 0; transform: scale(0.6);'
+          "
+        />
+      </view>
+      <text [class]="labelClass()"><ng-content /></text>
+    </view>
+  `,
+})
+export class UiRadioGroupItem {
+  readonly #group = inject(UiRadioGroup);
+
+  readonly itemValue = input.required<string>({ alias: 'value' });
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly dotRef = viewChild<ElementRef>('dot');
+  #dotAnim?: AnimationHandle;
+  #previousSelected?: boolean;
+
+  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);
+    });
+  }
+
+  protected readonly itemClass = computed(() =>
+    cn(
+      'h-11 flex-row items-center gap-3 flex',
+      this.#group.disabled() && 'opacity-50',
+      this.userClass(),
+    ),
+  );
+
+  protected readonly circleClass = computed(() =>
+    cn(
+      'h-5 w-5 items-center rounded-full border flex justify-center',
+      this.isSelected() ? 'border-primary' : 'border-primary',
+    ),
+  );
+
+  protected readonly dotClass = computed(() =>
+    cn('h-2.5 w-2.5 rounded-full bg-primary'),
+  );
+
+  protected readonly labelClass = computed(() => cn('text-sm text-foreground'));
+
+  select(): void {
+    if (this.#group.disabled()) return;
+    this.#group.select(this.itemValue());
+  }
+}

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

@@ -0,0 +1,6 @@
+export {
+  UiScatterChart,
+  UiScatterSeries,
+  computeDots,
+  type DotShape,
+} from './scatter-chart';