@blotch/dolan 22.2.3 → 22.2.5

package/dist/ui/components/candlestick-chart/candlestick-chart.test.ts

@@ -1,3 +1,9 @@
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
 import { createChartRuntime } from '@tanstack/charts/runtime';
 import { createChartTooltipContent } from '@tanstack/charts/tooltip/model';
 import type {
@@ -6,7 +12,11 @@ import type {
   SceneNode,
 } from '@tanstack/charts/types';
 import { describe, expect, it } from 'vitest';
-import { candlestickChartDefinition } from './candlestick-chart';
+import {
+  type CandlestickDatum,
+  UiCandlestickChart,
+  candlestickChartDefinition,
+} from './candlestick-chart';
 
 const data = [
   { x: 0, open: 100, high: 104, low: 98, close: 102 },
@@ -116,3 +126,74 @@ describe('candlestickChartDefinition', () => {
     expect(render2(definition).found.length).toBeGreaterThan(0);
   });
 });
+
+@Component({
+  imports: [UiCandlestickChart],
+  template: `
+    <ui-candlestick-chart
+      [data]="data"
+      [width]="300"
+      [upColor]="upColor()"
+      downColor="red"
+      (candleTap)="tapped.push($event)"
+    />
+  `,
+})
+class CandlestickChartHost {
+  readonly data = data;
+  readonly upColor = signal('green');
+  /** Every `candleTap`, in order. */
+  readonly tapped: CandlestickDatum[] = [];
+}
+
+/**
+ * The SVG the chart's marks layer draws.
+ */
+const marksSvg = (container: Element) =>
+  container.querySelectorAll('svg')[1]!.getAttribute('content')!;
+
+/**
+ * The middle of each candle body the chart drew.
+ */
+const bodiesDrawn = (container: Element) =>
+  [
+    ...marksSvg(container).matchAll(
+      /<rect x="([\d.-]+)" y="([\d.-]+)" width="([\d.-]+)" height="([\d.-]+)"[^>]*fill=/g,
+    ),
+  ].map(([, x, y, width, height]) => ({
+    x: Number(x) + Number(width) / 2,
+    y: Number(y) + Number(height) / 2,
+  }));
+
+/**
+ * Touches a spot of the chart and lifts the finger right there: a tap.
+ */
+const tap = async (container: Element, at: { x: number; y: number }) => {
+  const root = container.querySelector('[accessibility-label]')!;
+  fireEvent.touchstart(root, { touches: [at] });
+  fireEvent.touchend(root, { touches: [at] });
+  await waitForUpdate();
+};
+
+describe('UiCandlestickChart', () => {
+  it('colors each candle by direction with its inputs', async () => {
+    const { componentRef, container } = await render(CandlestickChartHost);
+    expect(bodiesDrawn(container)).toHaveLength(2);
+    expect(marksSvg(container)).toContain('fill="green"');
+    expect(marksSvg(container)).toContain('fill="red"');
+
+    (componentRef.instance as CandlestickChartHost).upColor.set('blue');
+    await waitForUpdate();
+    expect(marksSvg(container)).toContain('fill="blue"');
+  });
+
+  it("emits a tapped candle's datum, and nothing for a tap off the candles", async () => {
+    const { componentRef, container } = await render(CandlestickChartHost);
+    const host = componentRef.instance as CandlestickChartHost;
+    await tap(container, bodiesDrawn(container)[0]!);
+    expect(host.tapped).toEqual([data[0]]);
+
+    await tap(container, { x: -100, y: -100 });
+    expect(host.tapped).toEqual([data[0]]);
+  });
+});

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

@@ -1,8 +1,11 @@
-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 {
   UiCard,
   UiCardContent,
@@ -13,7 +16,6 @@ import {
 } from './card';
 
 @Component({
-  standalone: true,
   imports: [
     UiCard,
     UiCardHeader,
@@ -24,20 +26,53 @@ import {
     LYNX_ELEMENTS,
   ],
   template: `
-    <ui-card>
-      <ui-card-header>
-        <ui-card-title>Title</ui-card-title>
-        <ui-card-description>Desc</ui-card-description>
+    <ui-card [pressable]="pressable()" class="w-full">
+      <ui-card-header class="gap-1">
+        <ui-card-title class="text-lg">Title</ui-card-title>
+        <ui-card-description class="italic">Desc</ui-card-description>
       </ui-card-header>
-      <ui-card-content><text>Body</text></ui-card-content>
-      <ui-card-footer><text>Actions</text></ui-card-footer>
+      <ui-card-content class="pt-2"><text>Body</text></ui-card-content>
+      <ui-card-footer class="justify-end"><text>Actions</text></ui-card-footer>
     </ui-card>
   `,
 })
-class CardHost {}
+class CardHost {
+  readonly pressable = signal(false);
+}
+
+@Component({
+  imports: [UiCard, LYNX_ELEMENTS],
+  template: `<ui-card pressable><text>Order</text></ui-card>`,
+})
+class BarePressableHost {}
+
+/**
+ * The card's own view. Each component's host element renders as a view too,
+ * so it's found by the card's class rather than by being the first.
+ */
+const cardView = (container: Element) => container.querySelector('.bg-card')!;
+
+/**
+ * Fires a Lynx event `fireEvent` has no shortcut for, as Lynx dispatches it:
+ * `mouseleave` is the mouse's `touchcancel`.
+ */
+const fireLynxEvent = (element: Element, name: string) =>
+  fireEvent(
+    element,
+    Object.assign(new Event(`bindEvent:${name}`), {
+      eventType: 'bindEvent',
+      eventName: name,
+    }),
+  );
+
+/**
+ * The scale the card's inline style holds, if any.
+ */
+const scaleOf = (view: Element) =>
+  (view as HTMLElement).style.getPropertyValue('transform');
 
 describe('UiCard', () => {
-  it('renders each sub-component with projected content', async () => {
+  it('renders each part with its projected content', async () => {
     const { getByText } = await render(CardHost);
     expect(getByText('Title')).toBeTruthy();
     expect(getByText('Desc')).toBeTruthy();
@@ -45,66 +80,67 @@ describe('UiCard', () => {
     expect(getByText('Actions')).toBeTruthy();
   });
 
-  it('renders without a host wrapper', async () => {
-    const { container } = await render(UiCard);
-    expect(container).toBeTruthy();
+  it("merges each part's class with its own", async () => {
+    const { container, getByText } = await render(CardHost);
+    expect(cardView(container).getAttribute('class')).toContain('bg-card');
+    expect(cardView(container).getAttribute('class')).toContain('w-full');
+    expect(getByText('Title').getAttribute('class')).toContain('text-lg');
+    expect(getByText('Desc').getAttribute('class')).toContain('italic');
   });
 
-  it('press handlers are no-ops when pressable is false', async () => {
-    const { componentRef } = await render(UiCard);
-    const inst = componentRef.instance as unknown as {
-      onPressStart: () => void;
-      onPressEnd: () => void;
-      onPressCancel: () => void;
-    };
-    expect(() => inst.onPressStart()).not.toThrow();
-    expect(() => inst.onPressEnd()).not.toThrow();
-    expect(() => inst.onPressCancel()).not.toThrow();
+  it("doesn't respond to presses unless it's pressable", async () => {
+    const { container } = await render(CardHost);
+    const view = cardView(container);
+    fireEvent.touchstart(view);
+    fireEvent.mousedown(view);
+    expect(scaleOf(view)).toBe('');
+    fireEvent.touchend(view);
+    fireEvent.touchcancel(view);
+    fireEvent.mouseup(view);
+    fireLynxEvent(view, 'mouseleave');
+    expect(scaleOf(view)).toBe('');
   });
 
-  it('press handlers fire animations when pressable is true', async () => {
-    const { componentRef } = await render(UiCard);
-    const inst = componentRef.instance as UiCard;
-    setInputSignal(inst.pressable, true);
+  it('scales down while pressed by touch, and back on release', async () => {
+    const { container, componentRef } = await render(CardHost);
+    (componentRef.instance as CardHost).pressable.set(true);
     await waitForUpdate();
-    const cast = inst as unknown as {
-      onPressStart: () => void;
-      onPressEnd: () => void;
-      onPressCancel: () => void;
-    };
-    // Run twice so `#pressAnim?.cancel()` gets exercised on the second call.
-    cast.onPressStart();
-    cast.onPressStart();
-    cast.onPressEnd();
-    cast.onPressCancel();
-    // No assertion — coverage-only paths. Confirm no throw.
-    expect(true).toBe(true);
-  });
-});
+    const view = cardView(container);
 
-describe('Card sub-components', () => {
-  it('UiCardHeader renders projected content', async () => {
-    const { container } = await render(UiCardHeader);
-    expect(container.querySelector('view')).toBeTruthy();
-  });
+    fireEvent.touchstart(view);
+    expect(scaleOf(view)).toBe('scale(0.985)');
+    fireEvent.touchend(view);
+    expect(scaleOf(view)).toBe('scale(1)');
 
-  it('UiCardTitle renders projected content', async () => {
-    const { container } = await render(UiCardTitle);
-    expect(container.querySelector('text')).toBeTruthy();
+    // A scroll that takes the touch over cancels it: the card scales back.
+    fireEvent.touchstart(view);
+    fireEvent.touchcancel(view);
+    expect(scaleOf(view)).toBe('scale(1)');
   });
 
-  it('UiCardDescription renders projected content', async () => {
-    const { container } = await render(UiCardDescription);
-    expect(container.querySelector('text')).toBeTruthy();
-  });
+  it('is pressable with a bare pressable attribute', async () => {
+    const { container } = await render(BarePressableHost);
+    const view = cardView(container);
 
-  it('UiCardContent renders projected content', async () => {
-    const { container } = await render(UiCardContent);
-    expect(container.querySelector('view')).toBeTruthy();
+    fireEvent.touchstart(view);
+    expect(scaleOf(view)).toBe('scale(0.985)');
+    fireEvent.touchend(view);
+    expect(scaleOf(view)).toBe('scale(1)');
   });
 
-  it('UiCardFooter renders projected content', async () => {
-    const { container } = await render(UiCardFooter);
-    expect(container.querySelector('view')).toBeTruthy();
+  it('scales down while pressed by mouse, and back on release or leave', async () => {
+    const { container, componentRef } = await render(CardHost);
+    (componentRef.instance as CardHost).pressable.set(true);
+    await waitForUpdate();
+    const view = cardView(container);
+
+    fireEvent.mousedown(view);
+    expect(scaleOf(view)).toBe('scale(0.985)');
+    fireEvent.mouseup(view);
+    expect(scaleOf(view)).toBe('scale(1)');
+
+    fireEvent.mousedown(view);
+    fireLynxEvent(view, 'mouseleave');
+    expect(scaleOf(view)).toBe('scale(1)');
   });
 });

package/dist/ui/components/card/card.ts

@@ -2,6 +2,7 @@ import {
   type ElementRef,
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   input,
   viewChild,
@@ -40,7 +41,7 @@ export class UiCard {
   /**
    * When true, the card responds to touch with a subtle scale animation
    */
-  readonly pressable = input(false);
+  readonly pressable = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   readonly containerRef = viewChild<ElementRef>('container');

package/dist/ui/components/chart/chart-presets.test.ts

@@ -1,5 +1,30 @@
+import {
+  Component,
+  Injector,
+  type Type,
+  computed,
+  input,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
+import { defineChart, dot } from '@tanstack/charts/universal';
 import { describe, expect, it } from 'vitest';
-import { linearAxis, minSpacing, presetAxes } from './chart-presets';
+import { UiChart, tooltip } from './chart';
+import {
+  type CartesianPresetOptions,
+  PRESET_CHART_BINDINGS,
+  UiCartesianPreset,
+  type XYDatum,
+  linearAxis,
+  minSpacing,
+  presetAxes,
+} from './chart-presets';
 
 /**
  * The configured domain of an axis config's scale instance.
@@ -137,3 +162,174 @@ describe('presetAxes', () => {
     expect(domainOf(axes.y)).toEqual([-10, 10]);
   });
 });
+
+/**
+ * The smallest preset: a dot per datum on the shared axes, built the way the
+ * library's presets (`<ui-line-chart>`, …) build theirs.
+ */
+@Component({
+  selector: 'test-dot-chart',
+  imports: [UiChart],
+  template: `
+    <ui-chart
+      #chart
+      [definition]="definition()"
+      ${PRESET_CHART_BINDINGS}
+      (pointSelect)="pointTap.emit(datumOf($event))"
+    />
+  `,
+})
+class DotChart extends UiCartesianPreset<XYDatum> {
+  readonly data = input.required<readonly XYDatum[]>();
+  /** The tapped datum, or `null` for a tap on empty space. */
+  readonly pointTap = output<XYDatum | null>();
+
+  protected readonly definition = computed(() => {
+    const options = this.commonOptions();
+    const data = this.data();
+    return defineChart({
+      marks: [dot(data, { x: 'x', y: 'y' })],
+      scales: presetAxes(options, {
+        x: data.map((d) => d.x),
+        y: data.map((d) => d.y),
+      }),
+      tooltip: options.tooltip === false ? false : tooltip,
+    });
+  });
+}
+
+@Component({
+  imports: [DotChart],
+  template: `
+    <test-dot-chart
+      [data]="data"
+      [width]="300"
+      [height]="160"
+      label="Sales"
+      class="mt-2"
+      [xAxisLabel]="xAxisLabel()"
+      yAxisLabel="Units"
+      [zoomable]="true"
+      zoomAxes="x"
+      (pointTap)="tapped.push($event)"
+    />
+  `,
+})
+class PresetHost {
+  readonly data: readonly XYDatum[] = [
+    { x: 0, y: 100 },
+    { x: 5, y: 300 },
+    { x: 10, y: 500 },
+  ];
+  readonly xAxisLabel = signal('Day');
+  /** Every `pointTap`, in order. */
+  readonly tapped: (XYDatum | null)[] = [];
+  readonly preset = viewChild.required(DotChart);
+}
+
+/**
+ * The chart's own view, which takes every touch.
+ */
+const chartRoot = (container: Element) =>
+  container.querySelector('[accessibility-label]')!;
+
+/**
+ * Where the chart drew each dot, read from its marks layer.
+ */
+const dotsDrawn = (container: Element) =>
+  [
+    ...container
+      .querySelectorAll('svg')[1]!
+      .getAttribute('content')!
+      .matchAll(/<circle cx="([\d.-]+)" cy="([\d.-]+)"/g),
+  ].map(([, x, y]) => ({ x: Number(x), y: Number(y) }));
+
+/**
+ * Touches a spot and lifts the finger right there: a tap.
+ */
+const tap = async (root: Element, at: { x: number; y: number }) => {
+  fireEvent.touchstart(root, { touches: [at] });
+  fireEvent.touchend(root, { touches: [at] });
+  await waitForUpdate();
+};
+
+describe('UiCartesianPreset', () => {
+  it('starts every preset from the same defaults', () => {
+    // Angular builds a preset through the base's factory, with the preset's
+    // own type, so no preset runs that factory's default: build the base alone.
+    const base = Injector.create({
+      providers: [
+        {
+          provide: UiCartesianPreset,
+          useClass: UiCartesianPreset as unknown as Type<
+            UiCartesianPreset<XYDatum>
+          >,
+        },
+      ],
+    }).get(UiCartesianPreset);
+    const options = (
+      base as unknown as { commonOptions(): CartesianPresetOptions }
+    ).commonOptions();
+    expect(options).toEqual({
+      tickCount: 5,
+      showGrid: true,
+      showXGrid: false,
+      xAxisLabel: '',
+      yAxisLabel: '',
+      padding: {},
+      xMin: undefined,
+      xMax: undefined,
+      yMin: undefined,
+      yMax: undefined,
+      xTickFormat: undefined,
+      yTickFormat: undefined,
+      tooltip: true,
+    });
+    expect(base.height()).toBe(200);
+    expect(base.label()).toBe('Chart');
+    expect(base.zoomable()).toBe(false);
+    expect(base.zoomAxes()).toBe('xy');
+  });
+
+  it('passes the shared inputs through to its chart', async () => {
+    const { container, componentRef, getByText } = await render(PresetHost);
+    const root = chartRoot(container);
+    expect(root.getAttribute('accessibility-label')).toBe('Sales');
+    expect(root.getAttribute('class')).toContain('mt-2');
+    expect(root.getAttribute('style')).toContain('height: 160px');
+    expect(getByText('Units')).toBeTruthy();
+    expect(getByText('Day')).toBeTruthy();
+
+    (componentRef.instance as PresetHost).xAxisLabel.set('Week');
+    await waitForUpdate();
+    expect(getByText('Week')).toBeTruthy();
+  });
+
+  it('hands a tap over as the datum, or null off the points', async () => {
+    const { container, componentRef } = await render(PresetHost);
+    const host = componentRef.instance as PresetHost;
+    const root = chartRoot(container);
+    const middle = dotsDrawn(container)[1]!;
+    await tap(root, { x: middle.x + 1, y: middle.y + 1 });
+    await tap(root, { x: -100, y: -100 });
+    expect(host.tapped).toEqual([host.data[1], null]);
+  });
+
+  it('zooms its chart in and out, and resets it', async () => {
+    const { componentRef, queryByText } = await render(PresetHost);
+    const preset = (componentRef.instance as PresetHost).preset();
+    // The x axis spans 0–10; zoomed in around the middle, its last tick goes.
+    expect(queryByText('10')).not.toBeNull();
+    preset.zoomIn();
+    await waitForUpdate();
+    expect(queryByText('10')).toBeNull();
+    preset.zoomOut();
+    await waitForUpdate();
+    expect(queryByText('10')).not.toBeNull();
+
+    preset.zoomIn();
+    preset.resetZoom();
+    await waitForUpdate();
+    expect(queryByText('10')).not.toBeNull();
+  });
+});

package/dist/ui/components/chart/chart-presets.ts

@@ -1,4 +1,4 @@
-import { Directive, input, viewChild } from '@angular/core';
+import { Directive, booleanAttribute, input, viewChild } from '@angular/core';
 import { scaleLinear } from '@tanstack/charts/scales/linear';
 import type {
   ChartPoint,
@@ -173,6 +173,13 @@ export const minSpacing = (values: readonly number[]): number => {
   return Number.isFinite(spacing) && spacing > 0 ? spacing : 1;
 };
 
+/**
+ * `UiChart`, for `viewChild()`. A call rather than the class itself: for a
+ * class, Angular's test build keeps an arrow function that nothing calls,
+ * which an app's coverage report would show as uncovered.
+ */
+const chartType = () => UiChart;
+
 /**
  * The inputs and zoom API every cartesian preset shares. A preset extends this
  * and adds its own data and mark inputs, and renders `<ui-chart #chart>`
@@ -186,9 +193,9 @@ export abstract class UiCartesianPreset<TDatum> {
   /** Target number of ticks per axis; the axis picks nice values near it. */
   readonly tickCount = input(5);
   /** Horizontal gridlines at the y ticks. */
-  readonly showGrid = input(true);
+  readonly showGrid = input(true, { transform: booleanAttribute });
   /** Vertical gridlines at the x ticks. */
-  readonly showXGrid = input(false);
+  readonly showXGrid = input(false, { transform: booleanAttribute });
   readonly xAxisLabel = input('');
   readonly yAxisLabel = input('');
   readonly padding = input<ChartPadding>({});
@@ -199,20 +206,20 @@ export abstract class UiCartesianPreset<TDatum> {
   readonly xTickFormat = input<(value: number) => string>();
   readonly yTickFormat = input<(value: number) => string>();
   /** Shows a tooltip for the touched point; a tap pins it. */
-  readonly tooltip = input(true);
+  readonly tooltip = input(true, { transform: booleanAttribute });
   /** What a screen reader announces for the chart. */
   readonly label = input('Chart');
   /** Light, dark or `'system'` colors; the chart theme's setting when unset. */
   readonly colorScheme = input<Exclude<ChartColorSchemeOption, Function>>();
-  readonly zoomable = input(false);
+  readonly zoomable = input(false, { transform: booleanAttribute });
   readonly zoomAxes = input<ChartZoomAxes>('xy');
-  readonly showZoomControls = input(true);
+  readonly showZoomControls = input(true, { transform: booleanAttribute });
   readonly minZoom = input(1);
   readonly maxZoom = input(8);
   readonly zoomStep = input(1.4);
   readonly userClass = input<string>('', { alias: 'class' });
 
-  protected readonly chart = viewChild.required(UiChart);
+  protected readonly chart = viewChild.required(chartType());
 
   /**
    * The shared inputs, as the options every preset's definition takes.

package/dist/ui/components/chart/chart-theme.ts

@@ -79,6 +79,12 @@ export const CHART_LIGHT_COLORS: ChartColorTokens = {
   'chart-3': 'rgba(39, 71, 84, 1)',
   'chart-4': 'rgba(232, 196, 104, 1)',
   'chart-5': 'rgba(244, 164, 98, 1)',
+  'glass-tint': 'rgba(24, 24, 27, 1)',
+  'glass-tint-foreground': 'rgba(250, 250, 250, 1)',
+  'glass-foreground': 'rgba(9, 9, 11, 1)',
+  'glass-muted-foreground': 'rgba(63, 63, 70, 1)',
+  'glass-clear-foreground': 'rgba(255, 255, 255, 1)',
+  'glass-dim': 'rgba(0, 0, 0, 0.35)',
 };
 
 export const CHART_DARK_COLORS: ChartColorTokens = {
@@ -106,6 +112,12 @@ export const CHART_DARK_COLORS: ChartColorTokens = {
   'chart-3': 'rgba(232, 140, 48, 1)',
   'chart-4': 'rgba(175, 87, 219, 1)',
   'chart-5': 'rgba(226, 54, 112, 1)',
+  'glass-tint': 'rgba(250, 250, 250, 1)',
+  'glass-tint-foreground': 'rgba(24, 24, 27, 1)',
+  'glass-foreground': 'rgba(250, 250, 250, 1)',
+  'glass-muted-foreground': 'rgba(212, 212, 216, 1)',
+  'glass-clear-foreground': 'rgba(255, 255, 255, 1)',
+  'glass-dim': 'rgba(0, 0, 0, 0.35)',
 };
 
 /**