ngwr 13.0.0 → 14.0.0

package/fesm2022/ngwr-select.mjs

@@ -3,14 +3,14 @@ import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, input, inject, ElementRef, computed, effect, DestroyRef, ViewEncapsulation, Component, model, output, signal, contentChildren, viewChild, TemplateRef, ViewContainerRef, PLATFORM_ID, forwardRef } from '@angular/core';
+import { InjectionToken, input, inject, ElementRef, signal, computed, effect, afterEveryRender, ViewEncapsulation, Component, model, output, contentChildren, viewChild, TemplateRef, ViewContainerRef, DestroyRef, PLATFORM_ID, forwardRef } from '@angular/core';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { skip, debounce, timer, switchMap, of, defer, isObservable, from, tap, catchError, finalize } from 'rxjs';
 import { useConfigValue } from 'ngwr/config';
 import { WR_FORM_FIELD } from 'ngwr/form';
 import { useI18nText, useI18nFormatter } from 'ngwr/i18n';
 import { WR_OVERLAY, WrOutsideClick, WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet } from 'ngwr/overlay';
-import { randomId } from 'ngwr/utils';
+import { isComposing, randomId } from 'ngwr/utils';
 
 /**
  * @license
@@ -55,6 +55,31 @@ class WrOption {
     id = `wr-option-${++uid}`;
     host = inject(ElementRef);
     parent = inject(WR_SELECT, { optional: true });
+    /**
+     * The option's own text, as a signal — the parent's trigger label and the
+     * client-side filter both read it from here.
+     *
+     * It has to be a signal, and a plain `textContent` read cannot be one. The
+     * label is PROJECTED content: the host template decides it, and the ordinary
+     * way it changes is that a `WrI18n` catalog lands a microtask after the first
+     * change-detection pass (`i18n/i18n.ts` writes every loader-backed catalog
+     * from `firstValueFrom(...).then(...)`). Read once and cached, a trigger sat
+     * on the English fallback while the open panel beside it showed the
+     * translation — visible in `wr-pagination`'s size changer, which prints
+     * `pagination.perPage` into each `<wr-option>`.
+     *
+     * Kept in step the way `wr-divider` keeps its own projected label: an
+     * `effect` and an `afterEveryRender`, and both are needed. The render hook is
+     * a hard no-op under SSR, so on its own the server would emit a trigger with
+     * no label at all; the effect is not gated that way and runs after the
+     * content has been projected. The effect on its own cannot follow text that
+     * moves later, because it reads nothing reactive to be re-run by.
+     *
+     * @internal
+     */
+    labelText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
+    label = this.labelText.asReadonly();
     /**
      * @internal — true when this option is currently selected. Works for
      * both single and multi-select parents via `WrSelectContext.isSelected`.
@@ -84,8 +109,7 @@ class WrOption {
         const q = parent.searchQuery().trim().toLowerCase();
         if (!q)
             return false;
-        const label = (this.host.nativeElement.textContent ?? '').trim().toLowerCase();
-        return !label.includes(q);
+        return !this.label().toLowerCase().includes(q);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
@@ -105,19 +129,29 @@ class WrOption {
         if (this.parent) {
             const parent = this.parent;
             // Re-register when disabled or value changes so the parent has fresh metadata.
+            // The label is seeded here as well, which is the read the server takes.
             effect(onCleanup => {
+                this.syncLabel();
                 const unreg = parent.registerOption({
                     id: this.id,
                     value: this.value(),
                     disabled: this.disabled(),
-                    getLabel: () => this.host.nativeElement.textContent?.trim() ?? '',
+                    label: this.label,
                     host: this.host.nativeElement,
                 });
                 onCleanup(() => unreg());
             });
-            inject(DestroyRef);
+            afterEveryRender(() => this.syncLabel());
         }
     }
+    /**
+     * Read the projected text back off the DOM. Setting the same string again is
+     * a signal no-op, so the render hook costs a `textContent` read and nothing
+     * else on the passes where nothing moved.
+     */
+    syncLabel() {
+        this.labelText.set(this.host.nativeElement.textContent?.trim() ?? '');
+    }
     onClick() {
         if (this.disabled() || !this.parent)
             return;
@@ -620,7 +654,30 @@ class WrSelect {
     ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    selectedLabel = signal(null, /* @ts-ignore */
+    /**
+     * Trigger label for single mode. Multi reads `selectedChips` instead.
+     *
+     * A `computed`, and that is the whole point. It used to be a `signal` written
+     * from an effect keyed on `value` / `registry` / `isMulti` / `displayWith` —
+     * not one of which moves when the OPTION'S OWN TEXT does, and that text is
+     * projected content whose ordinary way of changing is a translation catalog
+     * landing a microtask after the first pass. The trigger kept the English
+     * fallback while the open panel beside it showed the translation. The
+     * registration now carries the label as a signal, so a late catalog and a
+     * runtime locale switch both repaint the trigger with the panel.
+     */
+    selectedLabel = computed(() => {
+        const v = this.value();
+        if (this.isMulti())
+            return null;
+        const match = this.registry().find(o => o.value === v);
+        if (match)
+            return match.label();
+        // Search mode: a value picked from a virtualized (or since-unmounted) row
+        // has no registered `<wr-option>`, so derive its label from `displayWith`
+        // — the same function that rendered the row.
+        return v != null && this.isSearchable() ? this.displayWith()(v) : null;
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
     /**
      * Selected chips (multi + tag modes). Multi reads labels from the
@@ -641,7 +698,7 @@ class WrSelect {
             // directly: a searchable multi fed from `[options]` has no registered
             // `<wr-option>` for a virtualized or unmounted row, and object items
             // would otherwise render as "[object Object]".
-            return { value: v, label: found?.getLabel() ?? this.displayWith()(v) };
+            return { value: v, label: found?.label() ?? this.displayWith()(v) };
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedChips" }] : /* istanbul ignore next */ []));
@@ -834,7 +891,7 @@ class WrSelect {
             return list.length;
         let count = 0;
         for (const o of list) {
-            if (o.getLabel().toLowerCase().includes(q))
+            if (o.label().toLowerCase().includes(q))
                 count++;
         }
         return count;
@@ -889,11 +946,29 @@ class WrSelect {
             this.onTagInput(event);
     }
     onChipsKeydown(event) {
+        if (this.imeOwnsKey(event))
+            return;
         if (this.hasChipSearch())
             this.onSearchKey(event);
         else
             this.onTagKeydown(event);
     }
+    /**
+     * True when the key belongs to an open IME conversion — and, when it does,
+     * stops the event on its way out.
+     *
+     * Not acting is not enough here. The panel closes on Escape from CDK's overlay
+     * keyboard dispatcher, one listener on `<body>` in the bubble phase, so a
+     * handler that merely returns still loses the panel: the Japanese user meant
+     * to cancel a reading and lost the query with it. Stopping the event at the
+     * field that owns the composition is the only place that reaches both.
+     */
+    imeOwnsKey(event) {
+        if (!isComposing(event))
+            return false;
+        event.stopPropagation();
+        return true;
+    }
     onChipsFocus() {
         // Tag mode has no panel to open.
         if (this.hasChipSearch())
@@ -959,6 +1034,10 @@ class WrSelect {
         this.touch.emit();
     }
     onSearchKey(event) {
+        // Enter accepts an IME candidate, Escape cancels the reading, the arrows walk
+        // the candidate list — none of it is the listbox's while a conversion is open.
+        if (this.imeOwnsKey(event))
+            return;
         // freeText: Enter on an unmatched query commits the typed string
         // as the value. Skips when an active option is highlighted (the
         // normal Enter-selects behaviour wins).
@@ -968,7 +1047,7 @@ class WrSelect {
             const list = this.orderedRegistry();
             const hasActive = this.virtualActive()
                 ? idx >= 0 && idx < this.filteredDynamicOptions().length
-                : idx >= 0 && idx < list.length && !list[idx].disabled && !this.isOptionHidden(list[idx].getLabel());
+                : idx >= 0 && idx < list.length && !list[idx].disabled && !this.isOptionHidden(list[idx].label());
             if (!hasActive && q) {
                 event.preventDefault();
                 this.value.set(q);
@@ -1140,26 +1219,6 @@ class WrSelect {
             catchError(() => of([])), finalize(() => this.loaderLoading.set(false)));
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe(items => this.loadedOptions.set(items));
-        // Resolve the single-mode trigger label whenever the value or
-        // options change. Multi mode reads `selectedChips` instead and
-        // doesn't need this.
-        effect(() => {
-            const v = this.value();
-            const list = this.registry();
-            if (this.isMulti()) {
-                this.selectedLabel.set(null);
-                return;
-            }
-            const match = list.find(o => o.value === v);
-            if (match) {
-                this.selectedLabel.set(match.getLabel());
-                return;
-            }
-            // Search mode: a value picked from a virtualized (or since-unmounted) row
-            // has no registered `<wr-option>`, so derive its label from `displayWith`
-            // — the same function that rendered the row.
-            this.selectedLabel.set(v != null && this.isSearchable() ? this.displayWith()(v) : null);
-        });
         // Wire the virtual scroll listener + viewport/row measurement while the panel
         // is open and virtualized. Re-runs when the panel opens/closes or the virtual
         // list mounts/unmounts; the microtask defers the DOM read until the overlay
@@ -1463,7 +1522,7 @@ class WrSelect {
                 // Filtered-out options stay registered (they only self-hide via CSS), so
                 // the hidden check is load-bearing: without it Enter can commit a row
                 // that is not on screen.
-                if (idx >= 0 && idx < list.length && !list[idx].disabled && !this.isOptionHidden(list[idx].getLabel())) {
+                if (idx >= 0 && idx < list.length && !list[idx].disabled && !this.isOptionHidden(list[idx].label())) {
                     const id = list[idx].id;
                     const el = this.overlayRef?.overlayElement.querySelector(`#${CSS.escape(id)}`);
                     el?.click();
@@ -1514,7 +1573,7 @@ class WrSelect {
         while (attempts-- > 0) {
             i = (i + delta + list.length) % list.length;
             const o = list[i];
-            if (!o.disabled && !this.isOptionHidden(o.getLabel())) {
+            if (!o.disabled && !this.isOptionHidden(o.label())) {
                 this.activeIndex.set(i);
                 return;
             }
@@ -1536,7 +1595,7 @@ class WrSelect {
     firstEnabled() {
         if (this.virtualActive())
             return this.filteredDynamicOptions().length > 0 ? 0 : -1;
-        return this.orderedRegistry().findIndex(o => !o.disabled && !this.isOptionHidden(o.getLabel()));
+        return this.orderedRegistry().findIndex(o => !o.disabled && !this.isOptionHidden(o.label()));
     }
     lastEnabled() {
         if (this.virtualActive())
@@ -1544,7 +1603,7 @@ class WrSelect {
         const list = this.orderedRegistry();
         let found = -1;
         list.forEach((o, i) => {
-            if (!o.disabled && !this.isOptionHidden(o.getLabel()))
+            if (!o.disabled && !this.isOptionHidden(o.label()))
                 found = i;
         });
         return found;