@nanahoshi/mona-ui 0.23.0 → 0.23.2

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, computed, Injectable, ElementRef, DestroyRef, makeEnvironmentProviders } from '@angular/core';
+import { InjectionToken, inject, signal, computed, Injectable, isDevMode, ElementRef, DestroyRef, makeEnvironmentProviders } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
 import { DateTime } from 'luxon';
 
@@ -13,6 +13,45 @@ const MONA_I18N_CONFIG = new InjectionToken("MONA_I18N_CONFIG", {
     factory: () => ({})
 });
 
+/**
+ * Locale id used whenever a supplied id cannot be turned into a valid BCP 47 tag.
+ * Matches the id of `MONA_DEFAULT_LOCALE`.
+ */
+const MONA_FALLBACK_LOCALE_ID = "en-US";
+const canonicalLocaleCache = new Map();
+/**
+ * Converts a locale id to a canonical BCP 47 tag, or returns `null` when it is not a valid tag.
+ *
+ * POSIX/Java style ids are accepted: `en_US` becomes `en-US`, and an encoding or modifier suffix
+ * (`de_DE.UTF-8`, `de_DE@euro`) is dropped.
+ */
+function tryCanonicalizeLocaleId(localeId) {
+    const raw = (localeId ?? "").trim();
+    if (!raw) {
+        return null;
+    }
+    if (canonicalLocaleCache.has(raw)) {
+        return canonicalLocaleCache.get(raw) ?? null;
+    }
+    let canonical = null;
+    try {
+        const tag = raw.replace(/[.@].*$/, "").replace(/_/g, "-");
+        canonical = Intl.getCanonicalLocales(tag)[0] ?? null;
+    }
+    catch {
+        canonical = null;
+    }
+    canonicalLocaleCache.set(raw, canonical);
+    return canonical;
+}
+/**
+ * Converts a locale id to a canonical BCP 47 tag. Ids that are empty or not valid tags resolve to
+ * {@link MONA_FALLBACK_LOCALE_ID}, so every formatter receives the same, valid locale.
+ */
+function canonicalizeLocaleId(localeId) {
+    return tryCanonicalizeLocaleId(localeId) ?? MONA_FALLBACK_LOCALE_ID;
+}
+
 function isPlainObject(value) {
     return value !== null && typeof value === "object" && !Array.isArray(value);
 }
@@ -43,6 +82,9 @@ function mergeMessages(fallback, localeMessages, overrideMessages) {
 }
 
 class MonaI18nService {
+    #config;
+    #locale;
+    #overrides;
     constructor() {
         this.#config = inject(MONA_I18N_CONFIG);
         this.#locale = signal(this.#config.locale ?? MONA_DEFAULT_LOCALE, /* @ts-ignore */
@@ -52,12 +94,14 @@ class MonaI18nService {
         this.direction = computed(() => this.#locale().direction, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
         this.locale = this.#locale.asReadonly();
-        this.localeId = computed(() => this.#locale().id, /* @ts-ignore */
+        /**
+         * Canonical BCP 47 id of the active locale. POSIX ids such as `en_US` are converted to `en-US`,
+         * and invalid ids resolve to `MONA_FALLBACK_LOCALE_ID` so formatters always receive a valid tag.
+         */
+        this.localeId = computed(() => canonicalizeLocaleId(this.#locale().id), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "localeId" }] : /* istanbul ignore next */ []));
+        warnOnInvalidLocaleId(this.#locale().id);
     }
-    #config;
-    #locale;
-    #overrides;
     clearMessages() {
         this.#overrides.set({});
     }
@@ -75,6 +119,7 @@ class MonaI18nService {
         this.#overrides.set(messages);
     }
     use(locale) {
+        warnOnInvalidLocaleId(locale.id);
         this.#locale.set(locale);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MonaI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -85,7 +130,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{
                     providedIn: "root"
                 }]
-        }] });
+        }], ctorParameters: () => [] });
+function warnOnInvalidLocaleId(localeId) {
+    if (isDevMode() && tryCanonicalizeLocaleId(localeId) == null) {
+        console.warn(`[mona-ui] "${localeId}" is not a valid BCP 47 locale id. Falling back to "${MONA_FALLBACK_LOCALE_ID}".`);
+    }
+}
 
 /**
  * Reads semantic document direction for a connected browser element using `:dir(rtl)` and `:dir(ltr)`.
@@ -366,6 +416,12 @@ function provideMonaI18n(config = {}) {
     ]);
 }
 
+/** Full-width forms of printable ASCII ("！" to "～"), offset from ASCII by U+FEE0. */
+const FULLWIDTH_ASCII_START = 0xff01;
+const FULLWIDTH_ASCII_END = 0xff5e;
+const FULLWIDTH_ASCII_OFFSET = 0xfee0;
+const DECIMAL_DIGIT_REGEX = /^\p{Nd}$/u;
+const asciiDigitCache = new Map();
 const numberSymbolsCache = new Map();
 const numberFormatterCache = new Map();
 const numberGroupingCache = new Map();
@@ -376,7 +432,8 @@ function serializeOptions(options) {
     const keys = Object.keys(options).sort();
     return keys.map(k => `${k}:${String(options[k])}`).join(";");
 }
-function getNumberGroupingPattern(localeId) {
+function getNumberGroupingPattern(locale) {
+    const localeId = canonicalizeLocaleId(locale);
     let pattern = numberGroupingCache.get(localeId);
     if (!pattern) {
         try {
@@ -439,7 +496,8 @@ function getNumberGroupingPattern(localeId) {
     }
     return pattern;
 }
-function getNumberSymbols(localeId) {
+function getNumberSymbols(locale) {
+    const localeId = canonicalizeLocaleId(locale);
     let symbols = numberSymbolsCache.get(localeId);
     if (!symbols) {
         const digitMap = new Map();
@@ -482,7 +540,7 @@ function getNumberSymbols(localeId) {
     return symbols;
 }
 function getNumberFormatter(locale, options) {
-    const cleanLocale = (locale ?? "").trim() || "en-US";
+    const cleanLocale = canonicalizeLocaleId(locale);
     const key = `${cleanLocale}:${serializeOptions(options)}`;
     let formatter = numberFormatterCache.get(key);
     if (!formatter) {
@@ -499,6 +557,30 @@ function getNumberFormatter(locale, options) {
 function formatNumber(value, locale, options) {
     return getNumberFormatter(locale, options).format(value);
 }
+/**
+ * ASCII value of a Unicode decimal digit (\p{Nd}), or null for any other character. Unicode encodes every
+ * decimal digit set as a contiguous 0-9 run, so the value is the distance from the start of the run.
+ */
+function toAsciiDigit(char) {
+    let digit = asciiDigitCache.get(char);
+    if (digit === undefined) {
+        digit = null;
+        if (DECIMAL_DIGIT_REGEX.test(char)) {
+            const code = char.codePointAt(0);
+            let runStart = code;
+            while (DECIMAL_DIGIT_REGEX.test(String.fromCodePoint(runStart - 1))) {
+                runStart--;
+            }
+            digit = String((code - runStart) % 10);
+        }
+        asciiDigitCache.set(char, digit);
+    }
+    return digit;
+}
+/**
+ * Converts digits of any script to ASCII digits. Full-width forms typed by CJK input methods
+ * ("１２．５", "－３", "１，０００") are folded to ASCII first.
+ */
 function normalizeLocalizedDigits(text, localeId) {
     if (!text) {
         return text;
@@ -506,27 +588,11 @@ function normalizeLocalizedDigits(text, localeId) {
     const symbols = localeId ? getNumberSymbols(localeId) : null;
     let result = "";
     for (const char of text) {
-        if (symbols?.digits.has(char)) {
-            result += symbols.digits.get(char);
-        }
-        else {
-            const code = char.charCodeAt(0);
-            if (code >= 0x0660 && code <= 0x0669) {
-                result += String(code - 0x0660);
-            }
-            else if (code >= 0x06f0 && code <= 0x06f9) {
-                result += String(code - 0x06f0);
-            }
-            else if (code >= 0x09e6 && code <= 0x09ef) {
-                result += String(code - 0x09e6);
-            }
-            else if (code >= 0x0966 && code <= 0x096f) {
-                result += String(code - 0x0966);
-            }
-            else {
-                result += char;
-            }
-        }
+        const code = char.codePointAt(0);
+        const folded = code >= FULLWIDTH_ASCII_START && code <= FULLWIDTH_ASCII_END
+            ? String.fromCharCode(code - FULLWIDTH_ASCII_OFFSET)
+            : char;
+        result += symbols?.digits.get(folded) ?? toAsciiDigit(folded) ?? folded;
     }
     return result;
 }
@@ -548,6 +614,21 @@ function normalizeLocalizedInput(text, localeId) {
     cleaned = normalizeLocalizedDigits(cleaned, localeId);
     return cleaned;
 }
+/**
+ * Decimal separators accepted while editing: the locale's own, plus "." and "," so a separator typed on a
+ * keyboard layout that does not match the locale still works. An alternate is dropped when it is the locale's
+ * group separator; otherwise "1,234" typed in en-US (or "1.234" in de-DE) would be read as 1.234.
+ */
+function getEditDecimalSeparators(symbols) {
+    const primary = symbols.decimal || ".";
+    const separators = new Set([primary]);
+    for (const alternate of [".", ","]) {
+        if (alternate !== symbols.group) {
+            separators.add(alternate);
+        }
+    }
+    return separators;
+}
 function parseLocalizedNumber(text, localeId, options) {
     if (text == null) {
         return null;
@@ -699,27 +780,7 @@ function parseLocalizedNumber(text, localeId, options) {
         if (/[\s\u00A0\u202F]/.test(cleaned)) {
             return null;
         }
-        const primaryDec = symbols.decimal || ".";
-        const candidateSeparators = new Set();
-        candidateSeparators.add(primaryDec);
-        if (primaryDec === ".") {
-            candidateSeparators.add(",");
-        }
-        else if (primaryDec === ",") {
-            candidateSeparators.add(".");
-        }
-        else {
-            candidateSeparators.add(".");
-            candidateSeparators.add(",");
-        }
-        if (primaryDec === "\u066B") {
-            candidateSeparators.add(".");
-            candidateSeparators.add(",");
-        }
-        if (primaryDec === "/") {
-            candidateSeparators.add(".");
-            candidateSeparators.add(",");
-        }
+        const candidateSeparators = getEditDecimalSeparators(symbols);
         let foundSep = null;
         let sepIndex = -1;
         for (let i = 0; i < cleaned.length; i++) {
@@ -878,25 +939,7 @@ function validateLocalizedNumberEdit(text, localeId, options) {
     if (normalized === "") {
         return { valid: true, complete: false, value: null };
     }
-    // Identify allowed decimal separators
-    const primaryDec = symbols.decimal || ".";
-    // Candidate separators: primary decimal, plus alternate '.' or ','
-    const candidateSeparators = new Set();
-    candidateSeparators.add(primaryDec);
-    if (primaryDec === ".") {
-        candidateSeparators.add(",");
-    }
-    else if (primaryDec === ",") {
-        candidateSeparators.add(".");
-    }
-    else {
-        candidateSeparators.add(".");
-        candidateSeparators.add(",");
-    }
-    if (primaryDec === "\u066B") {
-        candidateSeparators.add(".");
-        candidateSeparators.add(",");
-    }
+    const candidateSeparators = getEditDecimalSeparators(symbols);
     // Count how many separators from the candidate set appear
     let foundSep = null;
     let sepIndex = -1;
@@ -957,22 +1000,20 @@ function validateLocalizedNumberEdit(text, localeId, options) {
 /**
  * Normalizes a locale string to ensure it uses the Gregorian calendar system
  * and doesn't contain a conflicting -u-ca-* extension.
+ * Empty or malformed ids resolve to `MONA_FALLBACK_LOCALE_ID` (en-US).
  */
 function normalizeGregorianLocale(localeId) {
-    const trimmed = (localeId ?? "").trim();
-    if (!trimmed) {
-        return trimmed;
-    }
+    const canonical = canonicalizeLocaleId(localeId);
     try {
         if (typeof Intl !== "undefined" && typeof Intl.Locale === "function") {
-            const loc = new Intl.Locale(trimmed, { calendar: "gregory" });
+            const loc = new Intl.Locale(canonical, { calendar: "gregory" });
             return loc.toString();
         }
     }
     catch {
-        // Fallback safely if localeId is malformed
+        // Canonical tags are always accepted; keep the canonical id if Intl.Locale still refuses it
     }
-    return trimmed;
+    return canonical;
 }
 /**
  * Creates a Luxon DateTime from a Date instance, reconfigured to the specified locale
@@ -1023,17 +1064,29 @@ function stripBidiControls(value) {
 function sanitizeDateText(value) {
     return stripBidiControls(value).replace(/[\u00A0\u2009\u202F]/g, " ");
 }
+/**
+ * Luxon throws for formats that mix incompatible fields (e.g. ordinal and month/day tokens). Callers treat
+ * such input as unparsable, so the error becomes an invalid DateTime.
+ */
+function fromFormatSafe(text, format, options) {
+    try {
+        return DateTime.fromFormat(text, format, options);
+    }
+    catch (error) {
+        return DateTime.invalid("unparsable", error instanceof Error ? error.message : String(error));
+    }
+}
 /**
  * Parses a date string using the specified format and locale, forcing Gregorian calendar.
  * Localized digits are normalized first to support locales that use native numbering systems.
  */
 function parseGregorianDate(text, format, localeId) {
     const locale = normalizeGregorianLocale(localeId);
-    let dt = DateTime.fromFormat(text, format, { locale, outputCalendar: "gregory" });
+    let dt = fromFormatSafe(text, format, { locale, outputCalendar: "gregory" });
     if (!dt.isValid) {
         const sanitizedText = sanitizeDateText(text);
         const sanitizedFormat = sanitizeDateText(format);
-        dt = DateTime.fromFormat(sanitizedText, sanitizedFormat, { locale, outputCalendar: "gregory" });
+        dt = fromFormatSafe(sanitizedText, sanitizedFormat, { locale, outputCalendar: "gregory" });
         if (!dt.isValid) {
             let normalizedText = normalizeLocalizedDigits(sanitizedText, locale);
             let latnLocale = locale;
@@ -1045,20 +1098,20 @@ function parseGregorianDate(text, format, localeId) {
             catch {
                 // fallback
             }
-            dt = DateTime.fromFormat(normalizedText, sanitizedFormat, { locale: latnLocale, outputCalendar: "gregory" });
+            dt = fromFormatSafe(normalizedText, sanitizedFormat, { locale: latnLocale, outputCalendar: "gregory" });
             if (!dt.isValid) {
-                dt = DateTime.fromFormat(normalizedText, sanitizedFormat, { locale, outputCalendar: "gregory" });
+                dt = fromFormatSafe(normalizedText, sanitizedFormat, { locale, outputCalendar: "gregory" });
             }
             if (!dt.isValid) {
                 const effectiveLocale = latnLocale !== locale ? latnLocale : locale;
                 if (sanitizedFormat.includes(". ") && !normalizedText.includes(". ")) {
                     const textWithDotSpaces = normalizedText.replace(/\.(?!\s|$)/g, ". ");
-                    dt = DateTime.fromFormat(textWithDotSpaces, sanitizedFormat, {
+                    dt = fromFormatSafe(textWithDotSpaces, sanitizedFormat, {
                         locale: effectiveLocale,
                         outputCalendar: "gregory"
                     });
                     if (!dt.isValid && effectiveLocale !== locale) {
-                        dt = DateTime.fromFormat(textWithDotSpaces, sanitizedFormat, {
+                        dt = fromFormatSafe(textWithDotSpaces, sanitizedFormat, {
                             locale,
                             outputCalendar: "gregory"
                         });
@@ -1071,12 +1124,12 @@ function parseGregorianDate(text, format, localeId) {
                 if (sanitizedFormat.includes("dd. ") &&
                     /(\b\d{4}\.\s*\d{1,2}\.\s*\d{1,2})\.?\s+/.test(normalizedText)) {
                     const withDotBeforeTime = normalizedText.replace(/(\b\d{4}\.\s*\d{1,2}\.\s*\d{1,2})\.?\s+/, (_match, datePart) => `${datePart}. `);
-                    dt = DateTime.fromFormat(withDotBeforeTime, sanitizedFormat, {
+                    dt = fromFormatSafe(withDotBeforeTime, sanitizedFormat, {
                         locale: effectiveLocale,
                         outputCalendar: "gregory"
                     });
                     if (!dt.isValid && effectiveLocale !== locale) {
-                        dt = DateTime.fromFormat(withDotBeforeTime, sanitizedFormat, {
+                        dt = fromFormatSafe(withDotBeforeTime, sanitizedFormat, {
                             locale,
                             outputCalendar: "gregory"
                         });
@@ -1089,12 +1142,12 @@ function parseGregorianDate(text, format, localeId) {
                 const trimmedText = normalizedText.trim();
                 if (trimmedFormat.endsWith(".")) {
                     const textWithDot = trimmedText.endsWith(".") ? trimmedText : trimmedText + ".";
-                    dt = DateTime.fromFormat(textWithDot, trimmedFormat, {
+                    dt = fromFormatSafe(textWithDot, trimmedFormat, {
                         locale: effectiveLocale,
                         outputCalendar: "gregory"
                     });
                     if (!dt.isValid && effectiveLocale !== locale) {
-                        dt = DateTime.fromFormat(textWithDot, trimmedFormat, {
+                        dt = fromFormatSafe(textWithDot, trimmedFormat, {
                             locale,
                             outputCalendar: "gregory"
                         });
@@ -4560,8 +4613,15 @@ const dateFormatCache = new Map();
 const timeFormatCache = new Map();
 const dateTimeFormatCache = new Map();
 const firstDayCache = new Map();
+/**
+ * Turns an Intl literal part into Luxon format text. ASCII letters would otherwise be read as format tokens
+ * (the "h" in fr-CA "21 h 30", the "klo" in fi-FI "15.09.2026 klo 21.30"), so letter runs are quoted and
+ * apostrophes are doubled.
+ */
 function normalizeEditableLiteral(value) {
-    return sanitizeDateText(value);
+    return sanitizeDateText(value)
+        .replace(/'/g, "''")
+        .replace(/[A-Za-z]+/g, run => `'${run}'`);
 }
 /**
  * Derives a localized numeric date format (e.g. "yyyy/MM/dd" or "dd/MM/yyyy") for the given locale.
@@ -4721,7 +4781,7 @@ function getLocaleDateTimeInputFormat(localeId, options) {
  * Intl.Locale.getWeekInfo(), or CLDR fallbacks.
  */
 function getLocaleFirstDayOfWeek(localeId) {
-    const normalizedLocaleId = (localeId ?? "").trim();
+    const normalizedLocaleId = canonicalizeLocaleId(localeId);
     let firstDay = firstDayCache.get(normalizedLocaleId);
     if (!firstDay) {
         firstDay = resolveLocaleFirstDayOfWeek(normalizedLocaleId);
@@ -4870,5 +4930,5 @@ function generatePseudoLocale(catalogs, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { BIDI_CONTROL_REGEX, MONA_DEFAULT_LOCALE, MONA_I18N_CONFIG, MonaDirectionService, MonaI18nService, formatGregorianDateToLocaleString, formatNumber, generatePseudoLocale, 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 { 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 };
 //# sourceMappingURL=nanahoshi-mona-ui-i18n.mjs.map

package/fesm2022/nanahoshi-mona-ui-internal-filter-input.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, ElementRef, signal, input, output, effect, untracked, afterNextRender, Component } from '@angular/core';
-import { LucideSearch } from '@lucide/angular';
+import { inject, DestroyRef, ElementRef, signal, computed, input, output, effect, untracked, afterNextRender, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { LucideSearch } from '@lucide/angular';
 import { FilterChangeEvent } from '@nanahoshi/mona-ui/common';
 import { TextBoxComponent, TextBoxPrefixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
-import { Subject, fromEvent, debounceTime } from 'rxjs';
+import { Subject, fromEvent, debounce, timer } from 'rxjs';
 
 class FilterInputComponent {
     #destroyRef;
@@ -17,6 +17,44 @@ class FilterInputComponent {
         this.filter$ = new Subject();
         this.filterText = signal("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
+        /**
+         * When the input controls a list, it acts as a combobox (WAI-ARIA APG): focus stays in the input
+         * and the highlighted option is exposed through `aria-activedescendant`.
+         */
+        this.inputAttributes = computed(() => {
+            const controls = this.controls();
+            const ariaLabel = this.ariaLabel() || null;
+            if (!controls) {
+                return { "aria-label": ariaLabel };
+            }
+            return {
+                role: "combobox",
+                "aria-label": ariaLabel,
+                "aria-activedescendant": this.activeDescendant() || null,
+                "aria-autocomplete": "list",
+                "aria-controls": controls,
+                "aria-expanded": true
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputAttributes" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Id of the highlighted option in the controlled list, exposed as `aria-activedescendant`.
+         * @default ""
+         */
+        this.activeDescendant = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible name of the input. The placeholder is not a reliable label, so set this whenever possible.
+         * @default ""
+         */
+        this.ariaLabel = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Id of the list this input filters. When set, the input is exposed as a combobox controlling it.
+         * @default ""
+         */
+        this.controls = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
         this.debounce = input(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "debounce" }] : /* istanbul ignore next */ []));
         this.filter = input("", /* @ts-ignore */
@@ -59,7 +97,9 @@ class FilterInputComponent {
         this.setSubscriptions();
     }
     setSubscriptions() {
-        this.filter$.pipe(debounceTime(this.debounce()), takeUntilDestroyed(this.#destroyRef)).subscribe(value => {
+        this.filter$
+            .pipe(debounce(() => timer(this.debounce())), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(value => {
             const event = new FilterChangeEvent(value);
             this.filterChange.emit(event);
             if (!event.isDefaultPrevented()) {
@@ -69,12 +109,12 @@ class FilterInputComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: FilterInputComponent, isStandalone: true, selector: "mona-filter-input", inputs: { debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", inputBlur: "inputBlur", inputFocus: "inputFocus" }, ngImport: i0, template: "<mona-text-box\n    [ngModel]=\"filterText()\"\n    [clearButton]=\"true\"\n    [placeholder]=\"placeholder()\"\n    (inputFocus)=\"inputFocus.emit($event)\"\n    (inputBlur)=\"inputBlur.emit($event)\"\n    [tabindex]=\"0\"\n    [size]=\"size()\"\n    class=\"outline-none shadow-none focus-within:ring-1 focus-within:ring-primary/40\"\n    (ngModelChange)=\"filter$.next($event)\">\n    <ng-template monaTextBoxPrefixTemplate>\n        <div class=\"h-full flex items-center justify-center ps-2\">\n            <svg lucideSearch [size]=\"16\" aria-hidden=\"true\"></svg>\n        </div>\n    </ng-template>\n</mona-text-box>\n", dependencies: [{ kind: "component", type: LucideSearch, selector: "svg[lucideSearch]" }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: FilterInputComponent, isStandalone: true, selector: "mona-filter-input", inputs: { activeDescendant: { classPropertyName: "activeDescendant", publicName: "activeDescendant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", inputBlur: "inputBlur", inputFocus: "inputFocus" }, ngImport: i0, template: "<mona-text-box\n    [ngModel]=\"filterText()\"\n    [clearButton]=\"true\"\n    [placeholder]=\"placeholder()\"\n    (inputFocus)=\"inputFocus.emit($event)\"\n    (inputBlur)=\"inputBlur.emit($event)\"\n    [tabindex]=\"0\"\n    [inputAttributes]=\"inputAttributes()\"\n    [size]=\"size()\"\n    class=\"outline-none shadow-none focus-within:ring-1 focus-within:ring-primary/40\"\n    (ngModelChange)=\"filter$.next($event)\">\n    <ng-template monaTextBoxPrefixTemplate>\n        <div class=\"h-full flex items-center justify-center ps-2\">\n            <svg lucideSearch [size]=\"16\" aria-hidden=\"true\"></svg>\n        </div>\n    </ng-template>\n</mona-text-box>\n", dependencies: [{ kind: "component", type: LucideSearch, selector: "svg[lucideSearch]" }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-filter-input", imports: [LucideSearch, TextBoxComponent, FormsModule, TextBoxPrefixTemplateDirective], template: "<mona-text-box\n    [ngModel]=\"filterText()\"\n    [clearButton]=\"true\"\n    [placeholder]=\"placeholder()\"\n    (inputFocus)=\"inputFocus.emit($event)\"\n    (inputBlur)=\"inputBlur.emit($event)\"\n    [tabindex]=\"0\"\n    [size]=\"size()\"\n    class=\"outline-none shadow-none focus-within:ring-1 focus-within:ring-primary/40\"\n    (ngModelChange)=\"filter$.next($event)\">\n    <ng-template monaTextBoxPrefixTemplate>\n        <div class=\"h-full flex items-center justify-center ps-2\">\n            <svg lucideSearch [size]=\"16\" aria-hidden=\"true\"></svg>\n        </div>\n    </ng-template>\n</mona-text-box>\n" }]
-        }], ctorParameters: () => [], propDecorators: { debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+            args: [{ selector: "mona-filter-input", imports: [LucideSearch, TextBoxComponent, FormsModule, TextBoxPrefixTemplateDirective], template: "<mona-text-box\n    [ngModel]=\"filterText()\"\n    [clearButton]=\"true\"\n    [placeholder]=\"placeholder()\"\n    (inputFocus)=\"inputFocus.emit($event)\"\n    (inputBlur)=\"inputBlur.emit($event)\"\n    [tabindex]=\"0\"\n    [inputAttributes]=\"inputAttributes()\"\n    [size]=\"size()\"\n    class=\"outline-none shadow-none focus-within:ring-1 focus-within:ring-primary/40\"\n    (ngModelChange)=\"filter$.next($event)\">\n    <ng-template monaTextBoxPrefixTemplate>\n        <div class=\"h-full flex items-center justify-center ps-2\">\n            <svg lucideSearch [size]=\"16\" aria-hidden=\"true\"></svg>\n        </div>\n    </ng-template>\n</mona-text-box>\n" }]
+        }], ctorParameters: () => [], propDecorators: { activeDescendant: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDescendant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/filter-input