@blotch/dolan 22.2.6 → 22.2.8

package/dist/ui/components/dock/dock.ts

@@ -1115,8 +1115,12 @@ export class UiDock implements SearchFieldContainer {
   ],
   host: {
     // The host is the tap target and takes an equal share of the bar's row,
-    // which the selection capsule's width counts on.
-    class: 'flex-1 flex-col flex',
+    // which the selection capsule's width counts on. It's also the item's
+    // column, styled here rather than on a view inside it: Angular gives a
+    // component's host every static attribute the app writes on it, so a
+    // class on <ui-dock-item> lands on the host whatever the component does
+    // with its `class` input, and a styled view inside applied it twice.
+    '[class]': 'contentClass()',
     // One accessibility element per item, named by its label, so a screen
     // reader reads "Inbox, 3, button" instead of an unlabeled SVG and a word.
     // LynxRouterLinkActive adds `selected` to `button` while the route is
@@ -1140,35 +1144,33 @@ export class UiDock implements SearchFieldContainer {
     '(bindtap)': 'pressed.emit()',
   },
   template: `
-    <view [class]="contentClass()">
-      <view [class]="iconFrameClass()">
-        @if (design() === 'material') {
-          <!-- Material's active indicator: a pill behind the icon that
-               widens from its center as the item is selected. -->
+    <view [class]="iconFrameClass()">
+      @if (design() === 'material') {
+        <!-- Material's active indicator: a pill behind the icon that
+             widens from its center as the item is selected. -->
+        <view
+          class="h-8 w-14 rounded-full bg-primary absolute left-0 top-0"
+          [style]="indicatorStyle()"
+        ></view>
+      }
+      <view class="relative">
+        <svg [attr.content]="iconSvg()" style="width: 24px; height: 24px;" />
+        @if (badgeText()) {
+          <!-- Hangs off the icon's top-right corner, as on a native tab
+               bar. min-w-4 keeps a one-digit badge round; longer ones
+               grow into a pill. -->
           <view
-            class="h-8 w-14 rounded-full bg-primary absolute left-0 top-0"
-            [style]="indicatorStyle()"
-          ></view>
-        }
-        <view class="relative">
-          <svg [attr.content]="iconSvg()" style="width: 24px; height: 24px;" />
-          @if (badgeText()) {
-            <!-- Hangs off the icon's top-right corner, as on a native tab
-                 bar. min-w-4 keeps a one-digit badge round; longer ones
-                 grow into a pill. -->
-            <view
-              class="h-4 min-w-4 items-center rounded-full bg-destructive px-1 flex absolute -right-2.5 -top-1 justify-center"
+            class="h-4 min-w-4 items-center rounded-full bg-destructive px-1 flex absolute -right-2.5 -top-1 justify-center"
+          >
+            <text
+              class="text-[10px] font-semibold leading-4 text-destructive-foreground"
+              >{{ badgeText() }}</text
             >
-              <text
-                class="text-[10px] font-semibold leading-4 text-destructive-foreground"
-                >{{ badgeText() }}</text
-              >
-            </view>
-          }
-        </view>
+          </view>
+        }
       </view>
-      <text [class]="labelClass()">{{ label() }}</text>
     </view>
+    <text [class]="labelClass()">{{ label() }}</text>
   `,
 })
 export class UiDockItem {

package/dist/ui/components/empty-state/empty-state.test.ts

@@ -33,6 +33,15 @@ describe('UiEmptyState', () => {
     expect(container.querySelector('.py-6')).toBeTruthy();
   });
 
+  // Static attributes land on a component's host too (issue #181): the
+  // padding once, on the empty state itself, and the title only as its text.
+  it('puts its class on one element, and its title only in its text', async () => {
+    const { container, queryAllByTitle } = await render(EmptyStateHost);
+    expect(container.querySelectorAll('.py-6')).toHaveLength(1);
+    expect(container.querySelector('.py-6')?.classList).toContain('flex-col');
+    expect(queryAllByTitle('No results')).toEqual([]);
+  });
+
   it('adds the icon and description when they are set', async () => {
     const { componentRef, container, getByText } = await render(EmptyStateHost);
     const host = componentRef.instance as EmptyStateHost;

package/dist/ui/components/empty-state/empty-state.ts

@@ -5,22 +5,31 @@ import { cn } from '../../utils/cn';
 import { type IconName } from '../icon/icons';
 import { UiIcon } from '../icon/icon';
 
+/**
+ * The empty state is its host, styled through `host`. Angular gives a
+ * component's host every static attribute the app writes on it, so a class on
+ * <ui-empty-state> lands on the host whatever the component does: with a
+ * styled view inside as well, the padding applied twice. Its title lands
+ * there too, and goes: it's shown in a <text>, and on the web preview a
+ * `title` attribute is a tooltip (and a second match for getByTitle).
+ */
 @Component({
   selector: 'ui-empty-state',
-  standalone: true,
   imports: [LYNX_ELEMENTS, UiIcon],
   encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'containerClass()',
+    '[attr.title]': 'null',
+  },
   template: `
-    <view [class]="containerClass()">
-      @if (icon()) {
-        <ui-icon [name]="icon()!" size="lg" class="mb-3" />
-      }
-      <text [class]="titleClass()">{{ title() }}</text>
-      @if (description()) {
-        <text [class]="descriptionClass()">{{ description() }}</text>
-      }
-      <ng-content />
-    </view>
+    @if (icon()) {
+      <ui-icon [name]="icon()!" size="lg" class="mb-3" />
+    }
+    <text [class]="titleClass()">{{ title() }}</text>
+    @if (description()) {
+      <text [class]="descriptionClass()">{{ description() }}</text>
+    }
+    <ng-content />
   `,
 })
 export class UiEmptyState {

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

@@ -1,6 +1,6 @@
-import { Component, signal } from '@angular/core';
+import { Component, ErrorHandler, signal } from '@angular/core';
 import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { UiIcon } from './icon';
 import {
   ICON_DARK_COLORS,
@@ -105,6 +105,138 @@ describe('UiIcon', () => {
   });
 });
 
+@Component({
+  imports: [UiIcon],
+  template: `<ui-icon name="search" class="mb-3" />`,
+})
+class StaticClassHost {}
+
+describe('UiIcon on its own', () => {
+  // A class on a component lands on its host too (issue #181): the host is
+  // the <svg>, so the margin applies once.
+  it('is one svg, with the class written on it', async () => {
+    const { container } = await render(StaticClassHost);
+    const svgs = [...container.querySelectorAll('svg')];
+    expect(svgs).toHaveLength(1);
+    expect([...container.querySelectorAll('.mb-3')]).toEqual(svgs);
+  });
+});
+
+/** A one-color mark, written as an app would: no namespace. */
+const ONE_COLOR_MARK =
+  '<svg viewBox="0 0 16 16"><path fill="currentColor" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z"/></svg>';
+
+/** A multi-color mark, which already has the namespace. */
+const TWO_COLOR_MARK =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><path fill="#4285f4" d="M0 0h1v1H0z"/><path fill="#34a853" d="M1 0h1v1H1z"/></svg>';
+
+@Component({
+  imports: [UiIcon],
+  template: `<ui-icon [svg]="svg()" [color]="color()" size="lg" />`,
+})
+class SvgHost {
+  readonly svg = signal(ONE_COLOR_MARK);
+  readonly color = signal<string | undefined>(undefined);
+}
+
+const renderSvg = async (providers: Parameters<typeof render>[1] = {}) => {
+  const result = await render(SvgHost, providers);
+  return {
+    ...result,
+    host: result.componentRef.instance as SvgHost,
+    content: () =>
+      result.container.querySelector('svg')!.getAttribute('content')!,
+  };
+};
+
+describe("UiIcon with an app's own svg", () => {
+  it('draws the markup at the size given, with currentColor in the theme foreground', async () => {
+    const { container, content } = await renderSvg();
+    expect(container.querySelector('svg')!.getAttribute('style')).toContain(
+      '32px',
+    );
+    expect(content()).toContain('d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z"');
+    expect(content()).toContain(`fill="${ICON_LIGHT_COLORS['foreground']}"`);
+    expect(content()).not.toContain('currentColor');
+  });
+
+  it('follows the color scheme and the color input, as the set does', async () => {
+    const { host, content } = await renderSvg({
+      providers: [provideIconTheme({ colorScheme: 'dark' })],
+    });
+    expect(content()).toContain(ICON_DARK_COLORS['foreground']);
+
+    host.color.set('var(--primary)');
+    await waitForUpdate();
+    expect(content()).toContain(ICON_DARK_COLORS['primary']);
+  });
+
+  it('keeps the colors a multi-color mark writes out', async () => {
+    const { host, content } = await renderSvg();
+    host.svg.set(TWO_COLOR_MARK);
+    host.color.set('rgb(255, 0, 0)');
+    await waitForUpdate();
+    expect(content()).toBe(TWO_COLOR_MARK);
+  });
+
+  // The web preview draws the markup as an image, which a browser leaves
+  // blank without the namespace.
+  it('adds the SVG namespace when the markup has none, and only then', async () => {
+    const { host, content } = await renderSvg();
+    expect(content()).toMatch(
+      /^<svg xmlns="http:\/\/www\.w3\.org\/2000\/svg" viewBox="0 0 16 16">/,
+    );
+
+    host.svg.set(TWO_COLOR_MARK);
+    await waitForUpdate();
+    expect(content().match(/xmlns=/g)).toHaveLength(1);
+  });
+});
+
+@Component({
+  imports: [UiIcon],
+  template: `<ui-icon [name]="name()" [svg]="svg()" />`,
+})
+class NameAndSvgHost {
+  readonly name = signal<IconName | undefined>(undefined);
+  readonly svg = signal<string | undefined>(undefined);
+}
+
+/**
+ * Renders the host, keeping the errors Angular reports: an error in change
+ * detection goes to the app's ErrorHandler rather than out of render().
+ */
+const renderNameAndSvg = async () => {
+  const handleError = vi.fn();
+  const result = await render(NameAndSvgHost, {
+    providers: [{ provide: ErrorHandler, useValue: { handleError } }],
+  });
+  return {
+    host: result.componentRef.instance as NameAndSvgHost,
+    handleError,
+  };
+};
+
+const NAME_OR_SVG = new Error('<ui-icon> needs a name or an svg, not both.');
+
+describe('UiIcon without exactly one of name and svg', () => {
+  it('reports an error with neither', async () => {
+    const { handleError } = await renderNameAndSvg();
+    expect(handleError).toHaveBeenCalledWith(NAME_OR_SVG);
+  });
+
+  it('reports an error with both', async () => {
+    const { host, handleError } = await renderNameAndSvg();
+    host.name.set('check');
+    await waitForUpdate();
+    handleError.mockClear();
+
+    host.svg.set(ONE_COLOR_MARK);
+    await waitForUpdate();
+    expect(handleError).toHaveBeenCalledWith(NAME_OR_SVG);
+  });
+});
+
 describe('ICONS registry', () => {
   it('exports at least one icon', () => {
     expect(Object.keys(ICONS).length).toBeGreaterThan(0);

package/dist/ui/components/icon/icon.ts

@@ -1,5 +1,5 @@
-import { Component, ViewEncapsulation, input } from '@angular/core';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { Component, ViewEncapsulation, computed, input } from '@angular/core';
+import { registerHostElement } from '@blotch/angular-lynx';
 
 import { cn } from '../../utils/cn';
 import { injectIconColor } from './icon-theme';
@@ -8,25 +8,54 @@ import { type IconName, ICONS } from './icons';
 const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
 
 /**
+ * Gives the markup's root `<svg>` the SVG namespace when it has none. The web
+ * preview draws `content` as an image of the markup, and a browser draws
+ * nothing for an SVG image without the namespace. An app's own SVG often
+ * leaves it out, since an `<svg>` written in an HTML page doesn't need it.
+ */
+const withSvgNamespace = (markup: string): string =>
+  markup.replace(/<svg\b([^>]*)>/, (tag, attributes: string) =>
+    /\sxmlns\s*=/.test(attributes)
+      ? tag
+      : `<svg xmlns="http://www.w3.org/2000/svg"${attributes}>`,
+  );
+
+/**
+ * The icon is its host, an `<svg>` (registerHostElement, below). Angular gives
+ * a component's host every static attribute the app writes on it, so
+ * `<ui-icon class="mb-3">` puts `mb-3` on the host whatever the component
+ * does: with a styled `<svg>` inside a view host as well, the margin applied
+ * twice.
+ *
  * 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. Passing the full SVG string as the `content` attribute is how Lynx
  * renders vector graphics without a DOM tree.
+ *
+ * It draws an icon from the set (`name`) or the app's own markup (`svg`),
+ * such as a sign-in provider's mark, which the set can't hold.
  */
 @Component({
   selector: 'ui-icon',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <svg
-      [attr.content]="svgContent()"
-      [attr.style]="sizeStyle()"
-      [class]="svgClass()"
-    />
-  `,
+  host: {
+    '[attr.content]': 'svgContent()',
+    '[style.width.px]': 'sizePx()',
+    '[style.height.px]': 'sizePx()',
+    '[class]': 'svgClass()',
+  },
+  template: '',
 })
 export class UiIcon {
-  readonly name = input.required<IconName>();
+  /** An icon from the set (see `ICONS`). Give this or `svg`. */
+  readonly name = input<IconName | undefined>(undefined);
+  /**
+   * SVG markup to draw instead of an icon from the set. `currentColor` in it
+   * takes the icon's color, as in the set's icons, so a one-color mark
+   * follows the theme; colors written out stay, so a multi-color one keeps
+   * them. Give this or `name`.
+   */
+  readonly svg = input<string | undefined>(undefined);
   readonly size = input<'xs' | 'sm' | 'md' | 'lg'>('md');
   /**
    * A literal color or a theme token (`var(--primary)`). Without one, the icon
@@ -55,17 +84,27 @@ export class UiIcon {
     // climbs on every render/interaction 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 ICONS[this.name()]
+    return this.#markup()
       .split('currentColor')
       .join(this.#resolveColor(this.color()));
   }
 
-  protected sizeStyle(): string {
-    const px = SIZE_MAP[this.size()];
-    return `width: ${px}px; height: ${px}px;`;
+  /**
+   * The markup to draw. Neither input, or both, is a mistake in the template
+   * that the compiler can't catch, since neither input can be required, so
+   * it fails loudly rather than drawing an empty box or picking one.
+   */
+  #markup(): string {
+    const name = this.name();
+    const svg = this.svg();
+    if (svg !== undefined && name === undefined) return withSvgNamespace(svg);
+    if (name !== undefined && svg === undefined) return ICONS[name];
+    throw new Error('<ui-icon> needs a name or an svg, not both.');
   }
 
-  protected svgClass(): string {
-    return cn(this.userClass());
-  }
+  protected readonly sizePx = computed(() => SIZE_MAP[this.size()]);
+
+  protected readonly svgClass = computed(() => cn(this.userClass()));
 }
+
+registerHostElement(UiIcon, 'svg');

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

@@ -1,4 +1,5 @@
 import { Component, signal } from '@angular/core';
+import { FormField, form } from '@angular/forms/signals';
 import {
   fireEvent,
   render,
@@ -34,6 +35,7 @@ import { UiInput } from './input';
       (changed)="changes.push($event)"
       (focused)="events.push('focused')"
       (blurred)="events.push('blurred')"
+      (touch)="events.push('touch')"
     />
   `,
 })
@@ -53,7 +55,7 @@ const renderInput = async () => {
     ...result,
     host: result.componentRef.instance as InputHost,
     field: () => result.container.querySelector('input')!,
-    // The field's own column; the host element renders as a view too.
+    // The field's column: its host.
     column: () => result.container.querySelector('.flex-col')!,
     wrapper: () => result.container.querySelector('.bg-muted')!,
     // The layer that draws the focus ring around the field.
@@ -82,6 +84,15 @@ describe('UiInput', () => {
     expect(queryByText('you@example.com')).toBeNull();
   });
 
+  // Angular gives a component's host every static attribute written on it
+  // (issue #181): the class styled the column twice, and the placeholder made
+  // a second match for getByPlaceholderText.
+  it('puts its class and placeholder on one element each', async () => {
+    const { container, field, getAllByPlaceholderText } = await renderInput();
+    expect(container.querySelectorAll('.w-full')).toHaveLength(1);
+    expect(getAllByPlaceholderText('you@example.com')).toEqual([field()]);
+  });
+
   it('shows its label', async () => {
     const { host, getByText } = await renderInput();
     host.label.set('Email');
@@ -89,6 +100,23 @@ describe('UiInput', () => {
     expect(getByText('Email').classList).toContain('font-medium');
   });
 
+  // Issue #180: the label sat beside the field, so screen readers read the
+  // placeholder, or nothing once the field held text.
+  it('names the native field after its label, for screen readers', async () => {
+    const { host, field, getByRole, getByText } = await renderInput();
+    // A screen reader reaches the field with or without a label.
+    expect(field().getAttribute('accessibility-element')).toBe('true');
+    expect(field().hasAttribute('accessibility-label')).toBe(false);
+
+    host.label.set('Email');
+    await waitForUpdate();
+    expect(getByRole('textbox', { name: 'Email' })).toBe(field());
+    // The label the field reads isn't a second stop of its own.
+    expect(
+      getByText('Email').getAttribute('accessibility-elements-hidden'),
+    ).toBe('true');
+  });
+
   it('updates `value` and emits `changed` as the user types', async () => {
     const { host, field } = await renderInput();
     // Lynx puts the typed text in the event's detail, not on its target.
@@ -126,7 +154,7 @@ describe('UiInput', () => {
     setAttribute.mockRestore();
   });
 
-  it('shows a focus ring while focused, and emits `focused` and `blurred`', async () => {
+  it('shows a focus ring while focused, and emits `focused`, `blurred` and `touch`', async () => {
     const { host, field, ring } = await renderInput();
     expect(ring().style.getPropertyValue('opacity')).toBe('0');
 
@@ -140,7 +168,7 @@ describe('UiInput', () => {
     fireEvent.blur(field());
     await waitForUpdate();
     expect(ring().style.getPropertyValue('opacity')).toBe('0');
-    expect(host.events).toEqual(['focused', 'blurred']);
+    expect(host.events).toEqual(['focused', 'blurred', 'touch']);
   });
 
   it('shows its helper text', async () => {
@@ -200,6 +228,30 @@ describe('UiInput', () => {
     ]);
   });
 
+  // Issue #180: without `touch`, a field's error could only show once
+  // submit() marked every field touched.
+  it('marks a Signal Forms field touched when it loses focus', async () => {
+    @Component({
+      imports: [FormField, UiInput],
+      template: `<ui-input label="Email" [formField]="signIn.email" />`,
+    })
+    class SignalHost {
+      readonly model = signal({ email: '' });
+      readonly signIn = form(this.model);
+    }
+    const { componentRef, getByRole } = await render(SignalHost);
+    const host = componentRef.instance as SignalHost;
+    const email = getByRole('textbox', { name: 'Email' });
+
+    fireEvent.focus(email);
+    fireEvent.input(email, { detail: { value: 'jane@example.com' } });
+    expect(host.model().email).toBe('jane@example.com');
+    expect(host.signIn.email().touched()).toBe(false);
+
+    fireEvent.blur(email);
+    expect(host.signIn.email().touched()).toBe(true);
+  });
+
   it('makes the wrapper a stacking context so the field scrolls with it', async () => {
     // On Lynx a z-indexed element inside a scroll-view only follows the scroll
     // when an ancestor inside the scroll content is a stacking context. Without