@blotch/dolan 22.2.7 → 22.2.9

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

@@ -102,6 +102,23 @@ const renderButton = async (
 })
 class StaticAttributesHost {}
 
+/**
+ * A sign-in button with the provider's mark, an app's own SVG.
+ */
+@Component({
+  imports: [UiButton, UiIcon],
+  template: `
+    <ui-button variant="outline">
+      <ui-icon [svg]="mark" />
+      Continue with GitHub
+    </ui-button>
+  `,
+})
+class OwnSvgHost {
+  readonly 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>';
+}
+
 const IOS_26 = { platform: 'iOS', osVersion: '26.0' };
 const IOS_18 = { platform: 'iOS', osVersion: '18.5' };
 const ANDROID = { platform: 'Android', osVersion: '15' };
@@ -314,6 +331,19 @@ describe('UiButton', () => {
     );
   });
 
+  it("puts an icon of the app's own SVG before the label, in the label color", async () => {
+    const { container, getByText } = await render(OwnSvgHost);
+    const icon = container.querySelector('svg')!;
+
+    expect(container.firstElementChild!.classList).toContain('gap-2');
+    expect(
+      icon.compareDocumentPosition(getByText('Continue with GitHub')),
+    ).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+    expect(icon.getAttribute('content')).toContain(
+      `fill="${ICON_LIGHT_COLORS['foreground']}"`,
+    );
+  });
+
   it('puts one icon on each side of the label', async () => {
     const { host, getByText, icons, update } = await renderButton();
     await update(() => {

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

@@ -20,8 +20,10 @@ import {
 import { toSignal } from '@angular/core/rxjs-interop';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import {
+  type LayoutChangeDetail,
   LYNX_ELEMENTS,
   LynxAccessibilitySettings,
+  type LynxEvent,
   LynxRouterLinkActive,
 } from '@blotch/angular-lynx';
 
@@ -205,9 +207,6 @@ const CAPSULE_OPACITY = 0.1;
  */
 const ACCESSORY_ICON_COLOR = signal('var(--glass-foreground)').asReadonly();
 
-/** What Lynx's `layoutchange` event carries, as far as the dock reads it. */
-type LayoutChangeEvent = Event & { detail: { width: number } };
-
 /**
  * A CSS length in px.
  */
@@ -1014,8 +1013,8 @@ export class UiDock implements SearchFieldContainer {
     );
   });
 
-  protected measure(event: Event): void {
-    this.width.set((event as LayoutChangeEvent).detail.width);
+  protected measure({ detail }: LynxEvent<LayoutChangeDetail>): void {
+    this.width.set(detail.width);
   }
 
   /**

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,
@@ -122,6 +122,121 @@ describe('UiIcon on its own', () => {
   });
 });
 
+/** 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

@@ -7,6 +7,19 @@ 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
@@ -18,6 +31,9 @@ const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
  * 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',
@@ -31,7 +47,15 @@ const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
   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
@@ -60,11 +84,24 @@ 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()));
   }
 
+  /**
+   * 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 readonly sizePx = computed(() => SIZE_MAP[this.size()]);
 
   protected readonly svgClass = computed(() => cn(this.userClass()));

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

@@ -91,7 +91,7 @@ import { cn } from '../../utils/cn';
         [attr.disabled]="disabled() || undefined"
         class="text-sm text-foreground"
         style="border: none; background: transparent; height: 100%; width: 100%; position: relative; z-index: 1;"
-        (bindinput)="onInput($any($event))"
+        (bindinput)="onInput($event)"
         (bindfocus)="onFocus()"
         (bindblur)="onBlur()"
       />

package/dist/ui/components/navigation-bar/navigation-bar.ts

@@ -12,8 +12,10 @@ import {
 } from '@angular/core';
 import { ROUTES, Router } from '@angular/router';
 import {
+  type LayoutChangeDetail,
   LYNX_ELEMENTS,
   LynxAccessibilitySettings,
+  type LynxEvent,
   LynxLocationStrategy,
 } from '@blotch/angular-lynx';
 
@@ -48,9 +50,6 @@ const ROW_PADDING: Readonly<Record<GlassDesign, number>> = {
 /** The space between a centered title and the controls beside it, in px. */
 const TITLE_GAP = 8;
 
-/** What Lynx's `layoutchange` event carries, as far as the bar reads it. */
-type LayoutChangeEvent = Event & { detail: { width: number } };
-
 /**
  * How the inline title comes in as the large title scrolls under the bar,
  * and how Material's bar changes color as content scrolls under it.
@@ -379,20 +378,20 @@ export class UiNavigationBar {
     ),
   );
 
-  protected measureRow(event: Event): void {
-    this.rowWidth.set((event as LayoutChangeEvent).detail.width);
+  protected measureRow({ detail }: LynxEvent<LayoutChangeDetail>): void {
+    this.rowWidth.set(detail.width);
   }
 
-  protected measureTitle(event: Event): void {
-    this.titleWidth.set((event as LayoutChangeEvent).detail.width);
+  protected measureTitle({ detail }: LynxEvent<LayoutChangeDetail>): void {
+    this.titleWidth.set(detail.width);
   }
 
-  protected measureLeading(event: Event): void {
-    this.leadingWidth.set((event as LayoutChangeEvent).detail.width);
+  protected measureLeading({ detail }: LynxEvent<LayoutChangeDetail>): void {
+    this.leadingWidth.set(detail.width);
   }
 
-  protected measureTrailing(event: Event): void {
-    this.trailingWidth.set((event as LayoutChangeEvent).detail.width);
+  protected measureTrailing({ detail }: LynxEvent<LayoutChangeDetail>): void {
+    this.trailingWidth.set(detail.width);
   }
 
   /**

package/dist/ui/components/search-field/search-field.ts

@@ -184,11 +184,11 @@ const iconSvg = (icon: IconName, color: string): string =>
         [value]="value()"
         [class]="inputClass()"
         [style.font-size.px]="look().fontSize"
-        (bindinput)="onInput($any($event))"
-        (bindconfirm)="onConfirm($any($event))"
+        (bindinput)="onInput($event)"
+        (bindconfirm)="onConfirm($event)"
         (bindfocus)="onFocus()"
         (bindblur)="onBlur()"
-        (bindkeyboardheightchange)="onKeyboard($any($event))"
+        (bindkeyboardheightchange)="onKeyboard($event)"
       />
       @if (value() && !disabled()) {
         <view

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

@@ -85,7 +85,7 @@ import { cn } from '../../utils/cn';
         [attr.enable-scroll-bar]="maxLines() != null ? 'true' : null"
         class="text-sm text-foreground"
         style="border: none; background: transparent; height: 100%; width: 100%; line-height: 20px; position: relative; z-index: 1;"
-        (bindinput)="onInput($any($event))"
+        (bindinput)="onInput($event)"
         (bindfocus)="onFocus()"
         (bindblur)="onBlur()"
       ></textarea>

package/dist/ui/components/toolbar/bar-scroll.ts

@@ -12,7 +12,13 @@ import {
   type Signal,
   type WritableSignal,
 } from '@angular/core';
-import { LYNX_ELEMENTS, LynxSystemInfo } from '@blotch/angular-lynx';
+import {
+  type LayoutChangeDetail,
+  LYNX_ELEMENTS,
+  type LynxEvent,
+  LynxSystemInfo,
+  type ScrollDetail,
+} from '@blotch/angular-lynx';
 
 import { cn } from '../../utils/cn';
 import { type GlassDesign, injectGlassDesign } from '../glass/glass-design';
@@ -131,10 +137,6 @@ export const edgeFadeOverlay = (toward: 'bottom' | 'top'): string => {
   return `linear-gradient(to ${toward}, ${stops.join(', ')})`;
 };
 
-/** What Lynx sends with `scroll` and `layoutchange`, as far as this reads. */
-type ScrollDetail = { scrollTop: number; scrollHeight: number };
-type LayoutDetail = { height: number };
-
 /**
  * The platform, as SystemInfo names it, or undefined where there's no
  * SystemInfo to read, such as in unit tests, where LynxSystemInfo throws.
@@ -234,19 +236,19 @@ export class UiBarScroll {
     this.#renderer.listen(
       this.#element,
       'bindscroll',
-      (event: { detail: ScrollDetail }) => this.#scrolled(event.detail),
+      (event: LynxEvent<ScrollDetail>) => this.#scrolled(event.detail),
     ),
     // iOS and Android report the content's height when it changes, which a
     // frosted toolbar needs before anything scrolls.
     this.#renderer.listen(
       this.#element,
       'bindcontentsizechanged',
-      (event: { detail: ScrollDetail }) => this.#scrolled(event.detail),
+      (event: LynxEvent<ScrollDetail>) => this.#scrolled(event.detail),
     ),
     this.#renderer.listen(
       this.#element,
       'bindlayoutchange',
-      (event: { detail: LayoutDetail }) => {
+      (event: LynxEvent<LayoutChangeDetail>) => {
         this.viewport.set(event.detail.height);
         this.#update();
       },
@@ -334,16 +336,12 @@ export class UiBarScroll {
     return `linear-gradient(to bottom, ${stops.join(', ')})`;
   });
 
-  protected measureTop(event: Event): void {
-    this.topSpace.set(
-      (event as Event & { detail: LayoutDetail }).detail.height,
-    );
+  protected measureTop({ detail }: LynxEvent<LayoutChangeDetail>): void {
+    this.topSpace.set(detail.height);
   }
 
-  protected measureBottom(event: Event): void {
-    this.bottomSpace.set(
-      (event as Event & { detail: LayoutDetail }).detail.height,
-    );
+  protected measureBottom({ detail }: LynxEvent<LayoutChangeDetail>): void {
+    this.bottomSpace.set(detail.height);
   }
 
   #scrolled({ scrollTop, scrollHeight }: ScrollDetail): void {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blotch/dolan",
-  "version": "22.2.7",
+  "version": "22.2.9",
   "description": "CLI for adding @blotch/ui components to your project",
   "homepage": "https://github.com/Blotch-Smart-Frames/AngularLynx#readme",
   "bugs": {