@blotch/dolan 22.2.5 → 22.2.7

package/dist/ui/components/spinner/spinner.ts

@@ -1,11 +1,11 @@
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   ViewEncapsulation,
   computed,
   effect,
+  inject,
   input,
-  viewChild,
 } from '@angular/core';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
@@ -20,15 +20,23 @@ const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
   selector: 'ui-spinner',
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  // The host is the box that turns, sized and styled through `host`, with the
+  // drawing inside. Angular gives a component's host every static attribute
+  // the app writes on it, so a class on <ui-spinner> lands on the host
+  // whatever the component does: with a styled box inside as well, a 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 — the renderer doesn't support nested SVG elements. Passing the full
   // SVG markup string as the `content` attribute is the Lynx-native way to
   // embed vector graphics.
+  host: {
+    '[class]': 'containerClass()',
+    '[style]': 'sizeStyle()',
+  },
   template: `
-    <view #spinner [class]="containerClass()" [style]="sizeStyle()">
-      <svg [attr.content]="svgContent()" style="width: 100%; height: 100%;" />
-    </view>
+    <svg [attr.content]="svgContent()" style="width: 100%; height: 100%;" />
   `,
 })
 export class UiSpinner {
@@ -43,7 +51,7 @@ export class UiSpinner {
 
   readonly #resolveColor = injectIconColor();
 
-  readonly spinnerRef = viewChild.required<ElementRef>('spinner');
+  readonly #host = inject(ElementRef).nativeElement;
 
   /**
    * Turns the spinner for as long as it's shown. A field rather than a
@@ -51,7 +59,7 @@ export class UiSpinner {
    * nothing calls, which an app's coverage report would show as uncovered.
    */
   protected readonly rotation = effect(() => {
-    this.spinnerRef().nativeElement.animate(
+    this.#host.animate(
       [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
       {
         duration: 1600,

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

@@ -119,10 +119,21 @@ describe('UiSwitch', () => {
     settings.reduceTransparency.set(false);
   });
 
-  it('renders off, with the thumb at the left and the given class', async () => {
+  // Static attributes land on a component's host too (issue #181): the
+  // margin applies once, and only the switch itself is named Wi-Fi.
+  it('puts its class and accessibility label on one element each', async () => {
+    const { container, track, getAllByAccessibilityLabel } =
+      await renderSwitch();
+    expect([...container.querySelectorAll('.ml-2')]).toEqual([
+      track().parentElement,
+    ]);
+    expect(getAllByAccessibilityLabel('Wi-Fi')).toEqual([track()]);
+  });
+
+  it('renders off, with the thumb at the left, in a host with the given class', async () => {
     const { track, fill, thumb } = await renderSwitch();
     expect(fill().classList).toContain('bg-input');
-    expect(track().classList).toContain('ml-2');
+    expect(track().parentElement!.classList).toContain('ml-2');
     expect(style(track(), 'width')).toBe('44px');
     expect(thumb().classList).toContain('bg-background');
     // Centered 12px in: 2px from the edge for a 20px thumb.

package/dist/ui/components/switch/switch.ts

@@ -264,6 +264,19 @@ type Press = {
   selector: 'ui-switch',
   imports: [LYNX_ELEMENTS, UiGlass],
   encapsulation: ViewEncapsulation.None,
+  // The host holds the switch, with the app's class. Angular gives a
+  // component's host every static attribute the app writes on it, so a class
+  // on <ui-switch> lands on the host whatever the component does: passed on
+  // to the root as well, a margin applied twice. The root stays a view of its
+  // own: Lynx reads `consume-slide-event` as an array and
+  // `accessibility-element` as a boolean, which only a property binding on a
+  // Lynx element passes (a host binding would make them strings). Its
+  // accessibility-label is the root's, so the host drops its copy: two
+  // elements named the same would each be read.
+  host: {
+    '[class]': 'hostClass()',
+    '[attr.accessibility-label]': 'null',
+  },
   // Only the root takes touches: what's inside ignores them, so every touch
   // and its `x` belong to the switch.
   //
@@ -406,12 +419,13 @@ export class UiSwitch implements FormCheckboxControl {
     () => this.#systemDrawsGlass || !this.#settings.reduceTransparency(),
   );
 
+  protected readonly hostClass = computed(() => cn(this.userClass()));
+
   protected readonly rootClass = computed(() =>
     cn(
       'relative',
       this.disabled() &&
         (this.look() === 'material' ? 'opacity-[0.38]' : 'opacity-50'),
-      this.userClass(),
     ),
   );
 

package/dist/ui/components/tab-bar/tab-bar.test.ts

@@ -71,6 +71,16 @@ class TabBarHost {
   readonly items = viewChildren(UiTabBarItem);
 }
 
+@Component({
+  imports: [UiTabBar, UiTabBarItem],
+  template: `
+    <ui-tab-bar class="mt-1">
+      <ui-tab-bar-item route="/" icon="home" label="Home" class="pt-4" />
+    </ui-tab-bar>
+  `,
+})
+class StaticClassHost {}
+
 /** The theme's light colors, as icon-theme.ts resolves them for an SVG. */
 const PRIMARY = 'rgba(24, 24, 27, 1)';
 const MUTED_FOREGROUND = 'rgba(113, 113, 122, 1)';
@@ -132,7 +142,9 @@ describe('UiTabBar', () => {
 
   it('lays the bar out as a row above the bottom safe area', async () => {
     const { container, componentRef } = await render(UiTabBar);
-    const bar = container.querySelector('[accessibility-traits="tabbar"]')!;
+    // Rendered on its own, the bar's host is the root the test renders into.
+    const bar = container;
+    expect(bar.getAttribute('accessibility-traits')).toBe('tabbar');
     expect(bar.classList).toContain('flex-row');
     expect(bar.classList).toContain('pb-safe');
     expect(bar.classList).toContain('border-t');
@@ -267,14 +279,28 @@ describe('UiTabBar', () => {
     expect(scale()).toBe('scale(1)');
   });
 
-  it("merges an item's class into its content, the given class winning", async () => {
+  it("merges an item's class with its own, the given class winning", async () => {
     const { host, tab } = await renderTabBar();
-    const content = () => tab('Inbox').querySelector('view')!;
-    expect(content().classList).toContain('pt-2');
+    expect(tab('Inbox').classList).toContain('pt-2');
 
     host.inboxClass.set('pt-3');
     await waitForUpdate();
-    expect(content().classList).toContain('pt-3');
-    expect(content().classList).not.toContain('pt-2');
+    expect(tab('Inbox').classList).toContain('pt-3');
+    expect(tab('Inbox').classList).not.toContain('pt-2');
+  });
+
+  // Angular gives a component's host every static attribute written on it,
+  // so a bar or item that also styled a view inside its host applied the
+  // class twice (issue #181).
+  it('puts a class written on the bar or an item on that one element', async () => {
+    const { container } = await render(StaticClassHost, {
+      providers: [provideRouter(routes)],
+    });
+    expect([...container.querySelectorAll('.mt-1')]).toEqual([
+      container.querySelector('[accessibility-traits="tabbar"]'),
+    ]);
+    expect([...container.querySelectorAll('.pt-4')]).toEqual([
+      container.querySelector('[accessibility-label="Home"]'),
+    ]);
   });
 });

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

@@ -27,8 +27,14 @@ import { type IconName, ICONS } from '../icon/icons';
  */
 @Component({
   selector: 'ui-tab-bar',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  // The bar and each item are their host elements, styled through `host`,
+  // rather than a view inside the host. Angular gives a component's host
+  // every static attribute the app writes on it, so `<ui-tab-bar
+  // class="pt-2">` puts `pt-2` on the host whatever the component does with
+  // its `class` input: with a styled view inside as well, the padding applied
+  // twice.
+  //
   // `pb-safe` pads the bar by the bottom safe-area inset, so the items sit
   // above the iPhone's home indicator while the bar's background still runs
   // to the bottom edge, as a native tab bar's does. Lynx reports no insets on
@@ -38,11 +44,11 @@ import { type IconName, ICONS } from '../icon/icons';
   // native tab bar's container has: it tells VoiceOver that the buttons in it
   // are tabs. Android reads a single trait and has no tab bar trait, so there
   // the row stays a plain container.
-  template: `
-    <view accessibility-traits="tabbar" [class]="barClass()">
-      <ng-content />
-    </view>
-  `,
+  host: {
+    'accessibility-traits': 'tabbar',
+    '[class]': 'barClass()',
+  },
+  template: '<ng-content />',
 })
 export class UiTabBar {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -97,7 +103,7 @@ export class UiTabBar {
     // `flex-1` has to be on the host, the row's real child: on an inner view
     // it would share out the host's width instead (same lesson as
     // ui-nav-drawer-content).
-    class: 'flex-1 flex-col flex',
+    '[class]': 'contentClass()',
     // One accessibility element per tab, 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
@@ -122,25 +128,23 @@ export class UiTabBar {
     '(bindtap)': 'pressed.emit()',
   },
   template: `
-    <view [class]="contentClass()">
-      <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"
+    <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"
+        >
+          <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>
-      <text [class]="labelClass()">{{ label() }}</text>
+        </view>
+      }
     </view>
+    <text [class]="labelClass()">{{ label() }}</text>
   `,
 })
 export class UiTabBarItem {

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

@@ -57,11 +57,11 @@ class TabsHost {
 const renderTabs = async () => {
   const result = await render(TabsHost);
   /**
-   * A trigger's own view, which holds the tap listener, around its label.
+   * A trigger: its host, which holds the tap listener, around its label.
    */
   const trigger = (label: string) => result.getByText(label).parentElement!;
   /**
-   * A panel's own view, which wraps its projected text.
+   * A panel: its host, around its projected text.
    */
   const panel = (text: string) => result.getByText(text).parentElement!;
   return {
@@ -69,9 +69,8 @@ const renderTabs = async () => {
     host: result.componentRef.instance as TabsHost,
     trigger,
     panel,
-    /** The display of a panel's host element, which shows or hides it. */
-    displayOf: (text: string) =>
-      (panel(text).parentElement as HTMLElement).style.display,
+    /** The display of a panel, which shows or hides it. */
+    displayOf: (text: string) => panel(text).style.display,
     tap: async (label: string) => {
       fireEvent.tap(trigger(label));
       await waitForUpdate();
@@ -87,8 +86,6 @@ const CANCEL = 3;
 describe('UiTabs', () => {
   it("merges each part's class with its own", async () => {
     const { container, trigger, panel } = await renderTabs();
-    // Each host element carries the given class too, so look for the view
-    // that has both its own and the given class.
     expect(container.querySelector('.flex-col.w-80')).not.toBeNull();
     expect(container.querySelector('.rounded-lg.mb-2')).not.toBeNull();
     expect(
@@ -100,6 +97,21 @@ describe('UiTabs', () => {
     expect(panel('Account panel').classList).toContain('gap-2');
   });
 
+  // Angular gives a component's host every static attribute written on it,
+  // so a part that also styled a view inside its host applied the class
+  // twice (issue #181).
+  it('puts a class written on a part on that one element', async () => {
+    const { container, trigger, panel } = await renderTabs();
+    expect(container.querySelectorAll('.w-80')).toHaveLength(1);
+    expect(container.querySelectorAll('.mb-2')).toHaveLength(1);
+    expect([...container.querySelectorAll('.px-4')]).toEqual([
+      trigger('Account'),
+    ]);
+    expect([...container.querySelectorAll('.gap-2')]).toEqual([
+      panel('Account panel'),
+    ]);
+  });
+
   it("shows only the selected tab's panel, and highlights its trigger", async () => {
     const { getByText, trigger, displayOf } = await renderTabs();
     expect(displayOf('Account panel')).toBe('flex');
@@ -140,9 +152,8 @@ describe('UiTabs', () => {
 
   it('clips a hidden panel, whose text iOS would draw from its corner', async () => {
     const { panel } = await renderTabs();
-    const hostOf = (text: string) => panel(text).parentElement as HTMLElement;
-    expect(hostOf('Billing panel').style.overflow).toBe('hidden');
-    expect(hostOf('Account panel').style.overflow).toBe('');
+    expect(panel('Billing panel').style.overflow).toBe('hidden');
+    expect(panel('Account panel').style.overflow).toBe('');
   });
 
   it('shows the tab its value is set to, without reporting a change', async () => {
@@ -287,10 +298,7 @@ describe('UiTabs', () => {
       await waitForUpdate();
       expect(animate).not.toHaveBeenCalled();
       expect(
-        (
-          result.getByText('Billing panel').parentElement!
-            .parentElement as HTMLElement
-        ).style.display,
+        result.getByText('Billing panel').parentElement!.style.display,
       ).toBe('flex');
     });
 
@@ -385,14 +393,10 @@ describe('UiTabsList, segmented', () => {
       providers: [{ provide: LynxAccessibilitySettings, useValue: settings }],
     });
     /**
-     * A trigger's own view, around its label.
+     * A trigger: its host, the track's flex item, around its label.
      */
     const trigger = (label: string) => result.getByText(label).parentElement!;
-    /**
-     * A trigger's host, the track's flex item.
-     */
-    const slot = (label: string) => trigger(label).parentElement!;
-    const track = () => slot('Photos').parentElement!;
+    const track = () => trigger('Photos').parentElement!;
     /**
      * The indicator's frame, which moves between the tabs.
      */
@@ -402,7 +406,6 @@ describe('UiTabsList, segmented', () => {
       ...result,
       host: result.componentRef.instance as SegmentedTabsHost,
       trigger,
-      slot,
       track,
       frame,
       measure: async () => {
@@ -411,23 +414,22 @@ describe('UiTabsList, segmented', () => {
           ['Albums', 90],
           ['People', 180],
         ] as const) {
-          fireEvent.layoutchange(slot(label), { detail: { width } });
+          fireEvent.layoutchange(trigger(label), { detail: { width } });
         }
         await waitForUpdate();
       },
-      /** The display of a panel's host element, which shows or hides it. */
+      /** The display of a panel, which shows or hides it. */
       displayOf: (text: string) =>
-        (result.getByText(text).parentElement!.parentElement as HTMLElement)
-          .style.display,
+        result.getByText(text).parentElement!.style.display,
     };
   };
 
   it("draws the platform's segmented control, filling its width, its tabs sharing it", async () => {
-    const { track, slot, trigger, frame, getByText } = await renderSegmented();
+    const { track, trigger, frame, getByText } = await renderSegmented();
     expect(track().classList).toContain('rounded-full');
     expect(track().classList).not.toContain('self-start');
-    expect(slot('Albums').classList).toContain('flex-1');
-    expect(slot('People').classList).toContain('flex-[2]');
+    expect(trigger('Albums').classList).toContain('flex-1');
+    expect(trigger('People').classList).toContain('flex-[2]');
     expect(trigger('Photos').classList).toContain('justify-center');
     expect(getByText('Photos').classList).toContain('font-medium');
     expect(getByText('Albums').classList).not.toContain('font-medium');
@@ -508,18 +510,18 @@ describe('UiTabsList, segmented', () => {
   });
 
   it('goes back to the default tabs when the variant changes', async () => {
-    const { host, track, slot, frame } = await renderSegmented();
+    const { host, track, trigger, frame } = await renderSegmented();
     host.variant.set('default');
     await waitForUpdate();
     expect(track().classList).toContain('self-start');
-    expect(slot('Photos').classList).not.toContain('flex-1');
+    expect(trigger('Photos').classList).not.toContain('flex-1');
     expect(frame()).toBeNull();
   });
 
   it('lets a trigger outside a list take touches as the default tabs do', async () => {
     const result = await render(LoneTriggerHost);
     const trigger = result.getByText('Alone').parentElement!;
-    fireEvent.layoutchange(trigger.parentElement!, { detail: { width: 80 } });
+    fireEvent.layoutchange(trigger, { detail: { width: 80 } });
     fireEvent.touchstart(trigger, { touches: [{ pageX: 10 }] });
     fireEvent.touchmove(trigger, { touches: [{ pageX: 60 }] });
     fireEvent.touchend(trigger);
@@ -528,6 +530,6 @@ describe('UiTabsList, segmented', () => {
     fireEvent.tap(trigger);
     await waitForUpdate();
     expect(trigger.classList).toContain('bg-background');
-    expect(trigger.parentElement!.classList).not.toContain('flex-1');
+    expect(trigger.classList).not.toContain('flex-1');
   });
 });