@blotch/dolan 22.2.4 → 22.2.5

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

@@ -0,0 +1,286 @@
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
+import { LYNX_ELEMENTS, LynxAccessibilitySettings } from '@blotch/angular-lynx';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireLynxEvent } from '../../../test-utils/fire-lynx-event';
+import { UiGlass } from '../glass/glass';
+import { UiPopover, UiPopoverContent, UiPopoverTrigger } from './popover';
+
+@Component({
+  imports: [
+    LYNX_ELEMENTS,
+    UiGlass,
+    UiPopover,
+    UiPopoverContent,
+    UiPopoverTrigger,
+  ],
+  template: `
+    <ui-popover
+      [open]="open()"
+      (openChange)="open.set($event)"
+      (closed)="closed()"
+    >
+      @if (glassTrigger()) {
+        <blur-view
+          ui-glass
+          uiPopoverTrigger
+          class="trigger"
+          [accessibility-element]="true"
+          accessibility-traits="button"
+          accessibility-label="Tip"
+        >
+          <text>Tip</text>
+        </blur-view>
+      } @else if (withTrigger()) {
+        <view
+          uiPopoverTrigger
+          class="trigger"
+          [accessibility-element]="true"
+          accessibility-traits="button"
+          accessibility-label="Tip"
+        >
+          <text>Tip</text>
+        </view>
+      }
+      <ui-popover-content class="w-60 p-3">
+        <text>Liked trips show up first.</text>
+      </ui-popover-content>
+    </ui-popover>
+    <view class="like" (bindtap)="liked()"><text>Like</text></view>
+  `,
+})
+class PopoverHost {
+  readonly open = signal(false);
+  readonly withTrigger = signal(true);
+  readonly glassTrigger = signal(false);
+  readonly closed = vi.fn();
+  readonly liked = vi.fn();
+}
+
+/**
+ * The Lynx function that runs an element's UI methods, such as measuring it
+ * (`boundingClientRect`). The testing library defines it on the global
+ * object.
+ */
+type InvokeUIMethod = {
+  __InvokeUIMethod: (
+    element: Element,
+    method: string,
+    params: Record<string, unknown>,
+    callback: (result: { code: number; data?: unknown }) => void,
+  ) => void;
+};
+
+/** Accessibility settings a test can change, as the host app would. */
+const settings = {
+  reduceMotion: signal(false),
+  reduceTransparency: signal(false),
+  increaseContrast: signal(false),
+};
+
+/**
+ * Renders the popover on a platform (none for Material), measuring elements
+ * as `boundingClientRect` would on a phone: the safe area's markers a
+ * phone's screen, the content 240 by 80, and anything else, the trigger, a
+ * small box near the top.
+ */
+const renderPopover = async (
+  platform: { platform: string; osVersion: string } | null = {
+    platform: 'iOS',
+    osVersion: '26.0',
+  },
+) => {
+  vi.stubGlobal('SystemInfo', platform ?? undefined);
+  const measured: Element[] = [];
+  vi.spyOn(
+    globalThis as unknown as InvokeUIMethod,
+    '__InvokeUIMethod',
+  ).mockImplementation((element, method, _params, callback) => {
+    if (method !== 'boundingClientRect') {
+      callback({ code: 0 });
+      return;
+    }
+    measured.push(element);
+    const style = element.getAttribute('style') ?? '';
+    const data = style.includes('safe-area-inset')
+      ? { left: 0, top: 0, width: 402, height: 840 }
+      : element.classList.contains('shrink-0')
+        ? { left: 0, top: 0, width: 240, height: 80 }
+        : { left: 16, top: 80, width: 80, height: 44 };
+    callback({ code: 0, data });
+  });
+  const result = await render(PopoverHost, {
+    providers: [{ provide: LynxAccessibilitySettings, useValue: settings }],
+  });
+  const host = result.componentRef.instance as PopoverHost;
+  return {
+    ...result,
+    host,
+    measured,
+    trigger: () => result.container.querySelector('.trigger') as HTMLElement,
+    panel: () =>
+      result.container.querySelector(
+        'blur-view[ui-glass]:not(.trigger)',
+      ) as HTMLElement | null,
+  };
+};
+
+type Rendered = Awaited<ReturnType<typeof renderPopover>>;
+
+/**
+ * Waits until the popover has grown to its frame, its content shown.
+ */
+const waitForOpen = async ({ container }: Rendered) => {
+  await vi.waitFor(() =>
+    expect(
+      (container.querySelector('.shrink-0') as HTMLElement | null)?.style
+        .opacity,
+    ).toBe('1'),
+  );
+};
+
+/**
+ * Lets Lynx's timers run: the touch check waits for the next one.
+ */
+const nextTimer = () => new Promise((resolve) => setTimeout(resolve, 5));
+
+// The renderer warns that <ui-popover> and its parts aren't Lynx elements.
+beforeEach(() => {
+  vi.spyOn(console, 'warn').mockImplementation(() => {});
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe('UiPopover', () => {
+  it('opens and closes when its trigger is tapped', async () => {
+    const rendered = await renderPopover();
+    const { host, trigger, getByText } = rendered;
+
+    fireEvent.tap(trigger());
+    expect(host.open()).toBe(true);
+    await waitForOpen(rendered);
+    expect(getByText('Liked trips show up first.')).toBeTruthy();
+    // It opened from the trigger.
+    expect(rendered.measured[0]).toBe(trigger());
+
+    fireEvent.tap(trigger());
+    expect(host.open()).toBe(false);
+    await vi.waitFor(() => expect(host.closed).toHaveBeenCalledTimes(1));
+    await waitForUpdate();
+    expect(rendered.panel()).toBeNull();
+  });
+
+  it('closes on a touch outside it, which still reaches what it touched', async () => {
+    const rendered = await renderPopover();
+    rendered.host.open.set(true);
+    await waitForOpen(rendered);
+
+    // A tap on the like button: Lynx tells the popover through its global
+    // listener, and the button gets its tap as ever.
+    fireLynxEvent(rendered.panel()!, 'touchstart', {}, 'global-bindEvent');
+    fireEvent.tap(rendered.container.querySelector('.like')!);
+    await nextTimer();
+    expect(rendered.host.open()).toBe(false);
+    expect(rendered.host.liked).toHaveBeenCalledTimes(1);
+  });
+
+  it("doesn't take a touch on its trigger for one outside it", async () => {
+    const rendered = await renderPopover();
+    rendered.host.open.set(true);
+    await waitForOpen(rendered);
+
+    fireLynxEvent(rendered.trigger(), 'touchstart', {}, 'bindEvent');
+    fireLynxEvent(rendered.panel()!, 'touchstart', {}, 'global-bindEvent');
+    await nextTimer();
+    fireLynxEvent(rendered.trigger(), 'mousedown', {}, 'bindEvent');
+    fireLynxEvent(rendered.panel()!, 'mousedown', {}, 'global-bindEvent');
+    await nextTimer();
+    expect(rendered.host.open()).toBe(true);
+  });
+
+  it('hides its trigger while Liquid Glass grows out of it', async () => {
+    const rendered = await renderPopover();
+    expect(rendered.trigger().style.visibility).toBe('');
+
+    rendered.host.open.set(true);
+    await waitForOpen(rendered);
+    expect(rendered.trigger().style.visibility).toBe('hidden');
+
+    rendered.host.open.set(false);
+    await vi.waitFor(() => expect(rendered.host.closed).toHaveBeenCalled());
+    await waitForUpdate();
+    expect(rendered.trigger().style.visibility).toBe('');
+    // A trigger that isn't glass has no glass to hand over.
+    expect(rendered.trigger().hasAttribute('glass-effect-id')).toBe(false);
+  });
+
+  it("takes a glass trigger's glass over, shown as the trigger hides", async () => {
+    const rendered = await renderPopover();
+    rendered.host.glassTrigger.set(true);
+    await waitForUpdate();
+    const id = rendered.trigger().getAttribute('glass-effect-id');
+    expect(id).toMatch(/^ui-popover-\d+$/);
+
+    rendered.host.open.set(true);
+    // Shown at the trigger's place in the same update that hides the
+    // trigger, under the same id.
+    await waitForOpen(rendered);
+    expect(rendered.panel()!.style.visibility).toBe('');
+    expect(rendered.panel()!.getAttribute('glass-effect-id')).toBe(id);
+    expect(rendered.trigger().style.visibility).toBe('hidden');
+
+    rendered.host.open.set(false);
+    await vi.waitFor(() => expect(rendered.host.closed).toHaveBeenCalled());
+    await waitForUpdate();
+    expect(rendered.panel()).toBeNull();
+    expect(rendered.trigger().style.visibility).toBe('');
+
+    // A trigger that goes takes its glass with it.
+    rendered.host.glassTrigger.set(false);
+    await waitForUpdate();
+    expect(rendered.trigger().tagName.toLowerCase()).toBe('view');
+  });
+
+  it('leaves its trigger showing beside a Material surface', async () => {
+    const rendered = await renderPopover(null);
+    rendered.host.open.set(true);
+    await waitForOpen(rendered);
+
+    expect(rendered.trigger().style.visibility).toBe('');
+  });
+
+  it('opens from itself when nothing is its trigger', async () => {
+    const rendered = await renderPopover();
+    rendered.host.withTrigger.set(false);
+    await waitForUpdate();
+
+    rendered.host.open.set(true);
+    await waitForOpen(rendered);
+    // The popover's own element, which holds the content's slot.
+    expect(rendered.measured[0]).not.toBe(rendered.trigger());
+    expect(rendered.measured[0]?.classList.contains('like')).toBe(false);
+  });
+});
+
+describe('UiPopoverContent', () => {
+  it('is a padded column, with its class on its own element', async () => {
+    const rendered = await renderPopover();
+    rendered.host.open.set(true);
+    await waitForOpen(rendered);
+
+    const content = rendered.getByText(
+      'Liked trips show up first.',
+    ).parentElement!;
+    expect(content.classList).toContain('flex-col');
+    expect(content.classList).toContain('w-60');
+    expect(content.classList).toContain('p-3');
+    expect(content.classList).not.toContain('p-4');
+  });
+});

package/dist/ui/components/popover/popover.ts

@@ -0,0 +1,207 @@
+import {
+  Component,
+  DestroyRef,
+  Directive,
+  ElementRef,
+  ViewEncapsulation,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { cn } from '../../utils/cn';
+import { UiGlass } from '../glass/glass';
+import { type PopoverAnchor, UiPopoverPanel } from './popover-panel';
+
+/** How many popovers there have been, for their glass ids. */
+let popoverCount = 0;
+
+/**
+ * A popover's content: a column, padded, that a `ui-popover` shows when it
+ * opens.
+ *
+ * ```html
+ * <ui-popover-content class="w-64 gap-1">
+ *   <text class="text-base font-semibold text-glass-foreground">Kyoto</text>
+ *   <text class="text-sm text-glass-muted-foreground">Day 3 of 5</text>
+ * </ui-popover-content>
+ * ```
+ *
+ * Its classes go on its own element, so `class` sets its width, padding and
+ * spacing. It's as wide as its content by default, and no wider than the
+ * screen. Color text in it with `text-glass-foreground` and
+ * `text-glass-muted-foreground`, which suit the glass and Material's solid
+ * surface alike.
+ */
+@Component({
+  selector: 'ui-popover-content',
+  encapsulation: ViewEncapsulation.None,
+  // The classes on the host itself: it's the column, with no inner view in
+  // a host of no size of its own between it and the panel.
+  host: { '[class]': 'contentClass()' },
+  template: `<ng-content />`,
+})
+export class UiPopoverContent {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly contentClass = computed(() =>
+    cn('flex-col gap-1 p-4 flex', this.userClass()),
+  );
+}
+
+/**
+ * A popover: content that opens from the control that presents it, and
+ * leaves the rest of the screen as it was.
+ *
+ * ```html
+ * <ui-popover>
+ *   <ui-button uiPopoverTrigger variant="outline">Details</ui-button>
+ *   <ui-popover-content class="w-64">
+ *     <text class="text-sm text-glass-foreground">Check-in from 3pm.</text>
+ *   </ui-popover-content>
+ * </ui-popover>
+ * ```
+ *
+ * Mark the element that opens it with `uiPopoverTrigger`; what's in the
+ * `<ui-popover-content>` is the popover. A tap on the trigger opens and
+ * closes it, and a touch anywhere else closes it without being swallowed:
+ * nothing dims, and the button under the finger still gets the tap.
+ * `[(open)]` opens and closes it from code.
+ *
+ * On iOS 26 and later it's Liquid Glass that grows out of the trigger, over
+ * it, as iOS 26 grows a popover out of its source item. Before iOS 26 it's
+ * the frosted material beside the trigger, with an arrow pointing at it, as
+ * UIKit drew a popover on iPhone. On Android it's a Material 3 menu surface
+ * that unfolds below the trigger, or Liquid Glass with
+ * `provideGlass({ android: 'glass' })`. It stays inside the safe area, and
+ * opens upward near the bottom of the screen.
+ */
+@Component({
+  selector: 'ui-popover',
+  imports: [LYNX_ELEMENTS, UiPopoverPanel],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <ng-content />
+    <ui-popover-panel
+      #panel
+      [open]="open()"
+      [anchor]="anchor()"
+      [glassId]="glassId"
+      (dismissed)="close()"
+      (closed)="closed.emit()"
+    >
+      <ng-content select="ui-popover-content" />
+    </ui-popover-panel>
+  `,
+})
+export class UiPopover {
+  /** Whether the popover is open. */
+  readonly open = model(false);
+  /** The popover has closed and its close animation has finished. */
+  readonly closed = output<void>();
+
+  readonly #host = inject<ElementRef<PopoverAnchor>>(ElementRef);
+  readonly #trigger = signal<PopoverAnchor | null>(null);
+
+  /**
+   * The id the popover's glass and a glass trigger share (see UiGlass's
+   * `glassId`), unique to the popover, so it takes over the trigger's glass
+   * as it grows out of it.
+   */
+  readonly glassId = `ui-popover-${++popoverCount}`;
+
+  // Required: always in the template.
+  readonly panel = viewChild.required<UiPopoverPanel>('panel');
+
+  /**
+   * What the popover opens from: its trigger, or the popover's own element
+   * when nothing is marked `uiPopoverTrigger`.
+   */
+  protected readonly anchor = computed(
+    () => this.#trigger() ?? this.#host.nativeElement,
+  );
+
+  /** Whether the popover covers its trigger now; see coversAnchor. */
+  readonly coversTrigger = computed(() => this.panel().coversAnchor());
+
+  toggle(): void {
+    this.open.update((open) => !open);
+  }
+
+  close(): void {
+    this.open.set(false);
+  }
+
+  /**
+   * @internal Called by the `uiPopoverTrigger` directive.
+   */
+  setTrigger(trigger: PopoverAnchor | null): void {
+    this.#trigger.set(trigger);
+  }
+}
+
+/**
+ * Marks the element that opens a `ui-popover`: a tap on it opens or closes
+ * the popover, which opens from it.
+ *
+ * ```html
+ * <ui-popover>
+ *   <ui-button uiPopoverTrigger>Details</ui-button>
+ *   …
+ * </ui-popover>
+ * ```
+ *
+ * A touch on the trigger doesn't count as one outside the popover, so a tap
+ * on it closes an open popover rather than closing and reopening it.
+ */
+@Directive({
+  selector: '[uiPopoverTrigger]',
+  host: {
+    '(click)': 'popover.toggle()',
+    // Bubbling, from what the touch landed on in the trigger: Lynx 4.1 ran
+    // no capture listener on iOS (see UiPopoverPanel).
+    '(bindtouchstart)': 'popover.panel().touchedAnchor()',
+    '(bindmousedown)': 'popover.panel().touchedAnchor()',
+    '[style.visibility]': 'popover.coversTrigger() ? "hidden" : null',
+  },
+})
+export class UiPopoverTrigger {
+  protected readonly popover = inject(UiPopover);
+
+  /**
+   * Points the popover at this element until the directive is destroyed. A
+   * trigger that's glass itself (`<blur-view ui-glass uiPopoverTrigger>`)
+   * shares the popover's glass id meanwhile, so the popover takes its glass
+   * over (see UiPopoverPanel's coversAnchor).
+   */
+  protected readonly unregister = registerTrigger(
+    this.popover,
+    inject<ElementRef<PopoverAnchor>>(ElementRef).nativeElement,
+    inject(UiGlass, { self: true, optional: true }),
+    inject(DestroyRef),
+  );
+}
+
+/**
+ * Makes `trigger` the element `popover` opens from, and pairs its `glass`,
+ * if it's glass, with the popover's, until `destroyRef` is destroyed.
+ * Returns what takes the registration back early.
+ */
+const registerTrigger = (
+  popover: UiPopover,
+  trigger: PopoverAnchor,
+  glass: UiGlass | null,
+  destroyRef: DestroyRef,
+): (() => void) => {
+  popover.setTrigger(trigger);
+  glass?.pair(popover.glassId);
+  return destroyRef.onDestroy(() => {
+    popover.setTrigger(null);
+    glass?.pair(null);
+  });
+};

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

@@ -2,6 +2,7 @@ import {
   type ElementRef,
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   effect,
   input,
@@ -29,7 +30,7 @@ export class UiProgress {
   /**
    * When true, shows an indeterminate (looping) animation
    */
-  readonly indeterminate = input(false);
+  readonly indeterminate = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   readonly fillRef = viewChild.required<ElementRef>('fill');

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

@@ -2,6 +2,7 @@ import {
   type ElementRef,
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   effect,
   inject,
@@ -28,7 +29,7 @@ import { cn } from '../../utils/cn';
 })
 export class UiRadioGroup {
   readonly value = model<string>('');
-  readonly disabled = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   readonly changed = output<string>();

package/dist/ui/components/scroll-area/scroll-area.ts

@@ -1,6 +1,7 @@
 import {
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   input,
   output,
@@ -40,9 +41,9 @@ import { cn } from '../../utils/cn';
 export class UiScrollArea {
   readonly orientation = input<'vertical' | 'horizontal'>('vertical');
   readonly height = input<string>('');
-  readonly bounces = input(true);
-  readonly scrollBar = input(true);
-  readonly nestedScroll = input(false);
+  readonly bounces = input(true, { transform: booleanAttribute });
+  readonly scrollBar = input(true, { transform: booleanAttribute });
+  readonly nestedScroll = input(false, { transform: booleanAttribute });
   readonly upperThreshold = input(0);
   readonly lowerThreshold = input(0);
   readonly userClass = input<string>('', { alias: 'class' });

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

@@ -0,0 +1,15 @@
+export {
+  UI_SEARCH_FIELD_CONTAINER,
+  UiSearchField,
+  type SearchFieldContainer,
+} from './search-field';
+export {
+  KEYBOARD_GAP,
+  keyboardHeightOf,
+  keyboardLift,
+  keyboardScreen,
+  measureForKeyboard,
+  type KeyboardHeightEvent,
+  type KeyboardRect,
+  type KeyboardScreen,
+} from './keyboard';