@nanahoshi/mona-ui 0.23.2 → 0.23.3

package/fesm2022/nanahoshi-mona-ui-multi-select.mjs

@@ -6,7 +6,7 @@ import { none } from '@mirei/ts-collections';
 import { ChipComponent } from '@nanahoshi/mona-ui/chip';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken, DROPDOWN_POPUP_INPUT_TOKEN, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
-import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
+import { formatNumber, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { themeControlSurfaceClasses, createElementControlId, restoreOverlayScroll, rxFromResize } from '@nanahoshi/mona-ui/internal';
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
 import { ListService, ListComponent, ListGroupHeaderTemplateDirective, ListItemTemplateDirective, ListFooterTemplateDirective, ListHeaderTemplateDirective, ListNoDataTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
@@ -25,9 +25,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+function localizeNumber(value) {
+    return formatNumber(value, "en-US");
+}
 const MULTI_SELECT_DEFAULT_MESSAGES = {
     clear: "Clear",
-    itemsCount: (count) => `+ ${count} ${count === 1 ? "item" : "items"}`
+    itemsCount: (count) => `+ ${localizeNumber(count)} ${count === 1 ? "item" : "items"}`
 };
 
 class MultiSelectService {

package/fesm2022/nanahoshi-mona-ui-notification.mjs

@@ -260,9 +260,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class NotificationService {
     #appRef;
     #document;
+    #pendingTimeouts;
     constructor() {
         this.#appRef = inject(ApplicationRef);
         this.#document = inject(DOCUMENT$1);
+        this.#pendingTimeouts = new Set();
         this.notificationContainerMap = new Map();
         this.notificationContainerSubscriptions = {
             bottom: null,
@@ -273,6 +275,12 @@ class NotificationService {
             topright: null
         };
         this.initialize();
+        // The ApplicationRef is destroyed with the same injector, so a timeout firing afterwards would detach
+        // views from a destroyed ApplicationRef.
+        inject(DestroyRef).onDestroy(() => {
+            this.#pendingTimeouts.forEach(handle => window.clearTimeout(handle));
+            this.#pendingTimeouts.clear();
+        });
     }
     hide(id) {
         const notificationData = this.getNotificationDataById(id);
@@ -326,7 +334,7 @@ class NotificationService {
         host.appendChild(notificationContainerComponent.location.nativeElement);
         this.#appRef.attachView(notificationContainerComponent.hostView);
         notificationContainerComponent.changeDetectorRef.detectChanges();
-        window.setTimeout(() => {
+        this.scheduleTimeout(() => {
             containerSubject.next(notificationContainerComponent);
         });
         return containerSubject;
@@ -427,7 +435,7 @@ class NotificationService {
             container.componentRef = null;
             container.subscription = undefined;
             this.notificationContainerSubscriptions[position] = null;
-            window.setTimeout(() => {
+            this.scheduleTimeout(() => {
                 if (componentRefToDestroy) {
                     this.#appRef.detachView(componentRefToDestroy.hostView);
                     componentRefToDestroy.destroy();
@@ -435,6 +443,13 @@ class NotificationService {
             }, 300);
         }
     }
+    scheduleTimeout(callback, delay) {
+        const handle = window.setTimeout(() => {
+            this.#pendingTimeouts.delete(handle);
+            callback();
+        }, delay);
+        this.#pendingTimeouts.add(handle);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationService, providedIn: "root" }); }
 }

package/fesm2022/nanahoshi-mona-ui-pager.mjs

@@ -10,24 +10,27 @@ import { PreventableEvent, SlicePipe } from '@nanahoshi/mona-ui/common';
 import { DropdownListComponent, DropdownListValueTemplateDirective } from '@nanahoshi/mona-ui/dropdown-list';
 import { DropdownVirtualScrollDirective, DropdownItemTemplateDirective } from '@nanahoshi/mona-ui/dropdowns';
 import { themeRaisedBackdropClasses, NavigationKeys } from '@nanahoshi/mona-ui/internal';
-import { injectComponentDirection, MonaI18nService, formatNumber } from '@nanahoshi/mona-ui/i18n';
+import { formatNumber, injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { NumericTextBoxComponent } from '@nanahoshi/mona-ui/numeric-text-box';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+function localizeNumber(value) {
+    return formatNumber(value, "en-US");
+}
 const PAGER_DEFAULT_MESSAGES = {
     firstPageLabel: "First page",
-    jumpBackwardLabel: (pages) => `Jump back ${pages} pages`,
-    jumpForwardLabel: (pages) => `Jump forward ${pages} pages`,
+    jumpBackwardLabel: (pages) => `Jump back ${localizeNumber(pages)} pages`,
+    jumpForwardLabel: (pages) => `Jump forward ${localizeNumber(pages)} pages`,
     lastPageLabel: "Last page",
     nextPageLabel: "Next page",
     ofText: "of",
-    pageLabel: (page) => `Page ${page}`,
-    pageSizeLabel: (pageSize) => `${pageSize} / page`,
-    pageStatus: (page, totalPages) => `Page ${page} of ${totalPages}`,
+    pageLabel: (page) => `Page ${localizeNumber(page)}`,
+    pageSizeLabel: (pageSize) => `${localizeNumber(pageSize)} / page`,
+    pageStatus: (page, totalPages) => `Page ${localizeNumber(page)} of ${localizeNumber(totalPages)}`,
     pageText: "Page",
     previousPageLabel: "Previous page",
-    rangeStatus: (start, end, total) => `${start} - ${end} of ${total} items`
+    rangeStatus: (start, end, total) => `${localizeNumber(start)} - ${localizeNumber(end)} of ${localizeNumber(total)} items`
 };
 
 class PagerFocusableDirective {

package/fesm2022/nanahoshi-mona-ui-popup.mjs

@@ -636,7 +636,7 @@ class PopupService {
                 ? settings.anchor
                 : null;
         const direction = resolveComponentDirection(anchorElement, this.#directionality);
-        return this.#overlay.create(new OverlayConfig({
+        const overlayRef = this.#overlay.create(new OverlayConfig({
             positionStrategy,
             hasBackdrop: settings.hasBackdrop ?? false,
             height: settings.height,
@@ -650,6 +650,11 @@ class PopupService {
             direction,
             scrollStrategy: settings.blockScroll ? this.#overlay.scrollStrategies.block() : undefined
         }));
+        const lang = resolvePopupLanguage(anchorElement, this.#i18n?.localeId());
+        if (lang) {
+            overlayRef.overlayElement.setAttribute("lang", lang);
+        }
+        return overlayRef;
     }
     createPositionStrategy(settings) {
         if (settings.positionStrategy === "global") {
@@ -1046,6 +1051,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     providedIn: "root"
                 }]
         }] });
+/**
+ * Language of the popup content. The overlay container sits outside the app root, so a `lang` set on the root
+ * (or near the anchor) would not reach the popup and screen readers could read it with the wrong voice
+ * (WCAG 3.1.2). The nearest `lang` above the anchor wins; without one, the active Mona locale is used.
+ */
+function resolvePopupLanguage(anchorElement, localeId) {
+    const inherited = anchorElement?.closest("[lang]")?.getAttribute("lang")?.trim();
+    return inherited || localeId || null;
+}
 
 class PopupComponent {
     #destroyRef;

package/fesm2022/nanahoshi-mona-ui-rating.mjs

@@ -4,13 +4,16 @@ import { inject, TemplateRef, Directive, computed, viewChild, contentChild, sign
 import { LucideStar, LucideHeart, LucideFlame, LucideDiamond, LucideCircle, LucideDynamicIcon } from '@lucide/angular';
 import { createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { range } from '@mirei/ts-collections';
-import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
+import { formatNumber, injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+function localizeNumber(value) {
+    return formatNumber(value, "en-US");
+}
 const RATING_DEFAULT_MESSAGES = {
     notRated: "Not rated",
-    valueText: (value, max) => `${value} out of ${max}`
+    valueText: (value, max) => `${localizeNumber(value)} out of ${localizeNumber(max)}`
 };
 
 /**

package/fesm2022/nanahoshi-mona-ui-scroll-view.mjs

@@ -6,7 +6,7 @@ import { toCssValue } from '@nanahoshi/mona-ui/internal';
 import { select } from '@mirei/ts-collections';
 import { Subject, startWith, pairwise, map, interval, takeUntil, asyncScheduler, fromEvent, filter, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
-import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
+import { formatNumber, injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 
 const scrollViewBaseThemeVariants = cva(`
@@ -133,11 +133,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }] } });
 
+function localizeNumber(value) {
+    return formatNumber(value, "en-US");
+}
 const SCROLL_VIEW_DEFAULT_MESSAGES = {
     carousel: "carousel",
     nextPage: "Next page",
-    page: (current) => `Page ${current}`,
-    pageOf: (current, total) => `Page ${current} of ${total}`,
+    page: (current) => `Page ${localizeNumber(current)}`,
+    pageOf: (current, total) => `Page ${localizeNumber(current)} of ${localizeNumber(total)}`,
     previousPage: "Previous page",
     scrollPagerPrevious: "Scroll pager previous",
     scrollPagerNext: "Scroll pager next",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.23.2",
+  "version": "0.23.3",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {

package/types/nanahoshi-mona-ui-i18n.d.ts

@@ -484,8 +484,21 @@ declare const MONA_DEFAULT_LOCALE: MonaLocale;
 
 interface MonaI18nConfig {
     readonly locale?: MonaLocale;
+    /**
+     * Overrides applied only while the locale with that id is active, keyed by locale id such as "de-DE".
+     * They take precedence over {@link MonaI18nConfig.messages}.
+     */
+    readonly localeMessages?: Readonly<Record<string, DeepPartial<MonaLocaleMessages>>>;
+    /** Overrides applied whatever the active locale is. */
     readonly messages?: DeepPartial<MonaLocaleMessages>;
 }
+interface MonaMessageOverrideOptions {
+    /**
+     * Locale id the overrides apply to. When omitted, the overrides apply to every locale.
+     * Ids are canonicalized, so `de_DE` and `de-DE` address the same overrides.
+     */
+    readonly locale?: string;
+}
 
 declare const MONA_I18N_CONFIG: InjectionToken<MonaI18nConfig>;
 
@@ -499,10 +512,21 @@ declare class MonaI18nService {
      */
     readonly localeId: Signal<string>;
     constructor();
-    clearMessages(): void;
+    /**
+     * Removes overrides. With `options.locale`, only that locale's overrides are removed; without it, every
+     * override is removed, global and per locale.
+     */
+    clearMessages(options?: MonaMessageOverrideOptions): void;
     componentMessages<K extends keyof MonaLocaleMessages>(namespace: K, fallback: MonaLocaleMessages[K]): Signal<MonaLocaleMessages[K]>;
-    patchMessages(messages: DeepPartial<MonaLocaleMessages>): void;
-    setMessages(messages: DeepPartial<MonaLocaleMessages>): void;
+    /**
+     * Merges overrides into the existing ones. With `options.locale`, they apply only while that locale is
+     * active, so overrides patched for German do not show after switching to English.
+     */
+    patchMessages(messages: DeepPartial<MonaLocaleMessages>, options?: MonaMessageOverrideOptions): void;
+    /**
+     * Replaces the existing overrides. With `options.locale`, only that locale's overrides are replaced.
+     */
+    setMessages(messages: DeepPartial<MonaLocaleMessages>, options?: MonaMessageOverrideOptions): void;
     use(locale: MonaLocale): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MonaI18nService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MonaI18nService>;
@@ -540,6 +564,10 @@ interface NumberGroupingPattern {
     readonly primaryGroupSize: number;
     readonly secondaryGroupSize: number;
     readonly groupSeparator: string;
+    /**
+     * Fewest integer digits the locale groups when formatting (5 in es-ES, which formats 1000 but 10.000).
+     * Parsing does not enforce it: "1.000" is still read as 1000 in es-ES.
+     */
     readonly minimumGroupedIntegerDigits: number;
 }
 declare function getNumberGroupingPattern(locale: string): NumberGroupingPattern;
@@ -695,4 +723,4 @@ declare function pseudoLocalizeCatalog<T extends object>(catalog: T, options?: P
 declare function generatePseudoLocale(catalogs: DeepPartial<MonaLocaleMessages>, options?: GeneratePseudoLocaleOptions): MonaLocale;
 
 export { BIDI_CONTROL_REGEX, MONA_DEFAULT_LOCALE, MONA_I18N_CONFIG, MonaDirectionService, MonaI18nService, formatGregorianDateToLocaleString, formatNumber, generatePseudoLocale, getEditDecimalSeparators, getLocaleDateInputFormat, getLocaleDateTimeInputFormat, getLocaleFirstDayOfWeek, getLocaleTimeInputFormat, getNumberFormatter, getNumberGroupingPattern, getNumberSymbols, gregorianDateTime, gregorianDateTimeFromObject, injectComponentDirection, mergeMessages, mergeTwo, normalizeGregorianLocale, normalizeLocalizedDigits, normalizeLocalizedInput, normalizeLocalizedMinus, observeComponentDirection, parseGregorianDate, parseLocalizedNumber, provideMonaI18n, pseudoLocalize, pseudoLocalizeCatalog, resolveComponentDirection, sanitizeDateText, stripBidiControls, validateLocalizedNumber, validateLocalizedNumberEdit };
-export type { CalendarMessages, DatePickerMessages, DateTimePickerMessages, DeepPartial, DialogMessages, DirectionObserverHandle, FilterMessages, GeneratePseudoLocaleOptions, LocaleFirstDayOfWeek, LocaleTimeFormatOptions, LocalizedNumberEditValidationResult, LocalizedNumberParseMode, LocalizedNumberValidationResult, MonaAutoCompleteMessages, MonaBreadcrumbMessages, MonaButtonGroupMessages, MonaCalendarMessages, MonaCardMessages, MonaChartMessages, MonaChipMessages, MonaColorGradientMessages, MonaColorPaletteMessages, MonaColorPickerMessages, MonaComboBoxMessages, MonaDatePickerMessages, MonaDateTimePickerMessages, MonaDialogMessages, MonaDropdownListMessages, MonaDropdownsMessages, MonaEditorMessages, MonaFilterMessages, MonaGridMessages, MonaI18nConfig, MonaListBoxMessages, MonaListMessages, MonaLocale, MonaLocaleMessages, MonaMessageNamespace, MonaMultiSelectMessages, MonaNotificationMessages, MonaNumericTextBoxMessages, MonaOtpInputMessages, MonaPagerMessages, MonaRatingMessages, MonaScrollViewMessages, MonaSheetMessages, MonaSliderMessages, MonaSpinnerMessages, MonaSplitButtonMessages, MonaSplitterMessages, MonaStepperMessages, MonaTabsMessages, MonaTextBoxMessages, MonaTextDirection, MonaTimePickerMessages, MonaTimeSelectorMessages, MonaTreeViewMessages, MonaWindowMessages, NotificationMessages, NumberGroupingPattern, NumberSymbols, ParseLocalizedNumberOptions, PseudoLocalizationOptions, SheetMessages, TimePickerMessages, TimeSelectorMessages, ValidateLocalizedNumberEditOptions, WindowMessages };
+export type { CalendarMessages, DatePickerMessages, DateTimePickerMessages, DeepPartial, DialogMessages, DirectionObserverHandle, FilterMessages, GeneratePseudoLocaleOptions, LocaleFirstDayOfWeek, LocaleTimeFormatOptions, LocalizedNumberEditValidationResult, LocalizedNumberParseMode, LocalizedNumberValidationResult, MonaAutoCompleteMessages, MonaBreadcrumbMessages, MonaButtonGroupMessages, MonaCalendarMessages, MonaCardMessages, MonaChartMessages, MonaChipMessages, MonaColorGradientMessages, MonaColorPaletteMessages, MonaColorPickerMessages, MonaComboBoxMessages, MonaDatePickerMessages, MonaDateTimePickerMessages, MonaDialogMessages, MonaDropdownListMessages, MonaDropdownsMessages, MonaEditorMessages, MonaFilterMessages, MonaGridMessages, MonaI18nConfig, MonaListBoxMessages, MonaListMessages, MonaLocale, MonaLocaleMessages, MonaMessageNamespace, MonaMessageOverrideOptions, MonaMultiSelectMessages, MonaNotificationMessages, MonaNumericTextBoxMessages, MonaOtpInputMessages, MonaPagerMessages, MonaRatingMessages, MonaScrollViewMessages, MonaSheetMessages, MonaSliderMessages, MonaSpinnerMessages, MonaSplitButtonMessages, MonaSplitterMessages, MonaStepperMessages, MonaTabsMessages, MonaTextBoxMessages, MonaTextDirection, MonaTimePickerMessages, MonaTimeSelectorMessages, MonaTreeViewMessages, MonaWindowMessages, NotificationMessages, NumberGroupingPattern, NumberSymbols, ParseLocalizedNumberOptions, PseudoLocalizationOptions, SheetMessages, TimePickerMessages, TimeSelectorMessages, ValidateLocalizedNumberEditOptions, WindowMessages };

package/types/nanahoshi-mona-ui-notification.d.ts

@@ -96,6 +96,7 @@ declare class NotificationService {
     private getNotificationDataById;
     private initialize;
     private removeNotificationData;
+    private scheduleTimeout;
     static ɵfac: i0.ɵɵFactoryDeclaration<NotificationService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NotificationService>;
 }