import type { EventEmitter } from '../../stencil-public-runtime'; import type { PhoneInputChangeDetail, PhoneInputCountryChangeDetail, PhoneInputInputDetail, PhoneInputSize, PhoneInputType, PhoneInputVariant } from './mud-phone-input.types'; import type { LocaleProp } from '../../utils/locale'; /** * Phone Input — phone-number entry molecule with country-code prefix and * format mask. The most Moldova-specific input in the family: it ships a * default `+373` country, every country that has a numbering plan (245) * with its SVG flag (flag-icons, shipped as local assets), and * Romanian-voice placeholder + error copy. * * Pattern B (molecule, form-associated): renders its own `` * inside shadow DOM alongside an inline country trigger that either * displays a static flag+dial-code pill (`type="local"`, Moldova-first * default) or a combobox that opens a country listbox (`type="international"`). * Form participation works via `formAssociated` + `ElementInternals`; the * form value is the canonical E.164 string (`+37362123456`). * * @element mud-phone-input * * @slot label - Rich label content, replaces the `label` prop when present. * @slot helper - Rich helper / hint content, replaces the `helper-text` prop. Hidden when invalid + error-text is shown. */ export declare class MudPhoneInput { /** * Color treatment. `destructive` is forced when `invalid` is set. * @default 'default' */ variant: PhoneInputVariant; /** * Visual size rung. * @default 'md' */ size: PhoneInputSize; /** * Phone entry mode. * - `local` (default — Moldova-first): country trigger renders as a * static flag+dial-code pill (no chevron, no listbox). Assumes the * `defaultCountry` implicitly and only accepts its national format. * - `international`: country trigger renders as a combobox (flag + dial * code + chevron); clicking opens a listbox of all eligible * countries. Use when the caller can't guarantee the citizen is * filing from inside the home market. * @default 'local' */ type: PhoneInputType; /** * Loading state. When true the control becomes uninteractive and an * inline `mud-spinner` renders inside the input row. The host carries * `aria-busy="true"` for assistive technologies. * @default false */ loading: boolean; /** * Disables interactivity. Trigger and input receive `aria-disabled` and * the native `disabled` attribute. * @default false */ disabled: boolean; /** * Marks the field as mandatory. Adds a red asterisk to the label and * sets `aria-required` on the internal control. * @default false */ required: boolean; /** * Renders the field read-only. The input remains focusable and copyable; * the country trigger renders inert. Background steps into the soft-gray * surface to telegraph "visible but not editable", matching the rest of * the input family. * @default false */ readonly: boolean; /** * Forces destructive visuals regardless of `variant`. Sets `aria-invalid`. * Use together with `errorText` to surface the message. * @default false */ invalid: boolean; /** * Reflects the open state of the country listbox. Mutate via * `mudOpen` / `mudClose` events, not by writing to the attribute. * Only meaningful when `type="international"` — Local mode never opens * a listbox. * @default false */ open: boolean; /** * Current value — canonical E.164 (`+37362123456`). Reflects to the host * attribute. Empty string represents an unfilled field. * @default '' */ value: string; /** * Initial country selection (ISO 3166-1 alpha-2). Defaults to Moldova * because the system serves citizens calling government services. * @default 'MD' */ defaultCountry: string; /** * Optional whitelist of ISO codes to surface in the dropdown, in the given * order. Defaults to every country when omitted (Moldova first, the rest * sorted by the displayed name). */ countries?: string[]; /** Form-control `name`. Used during form submission with the E.164 value. */ name?: string; /** Plain-text label. Use the `label` slot for richer content. */ label?: string; /** Plain-text helper / hint shown below the control. */ helperText?: string; /** * Plain-text error message shown below the control when `invalid` is * set. When present it replaces `helperText` and pairs with the error * icon. Defaults to the Romanian message * `"Numărul de telefon este incomplet"` when `invalid` is set without a * custom message. */ errorText?: string; /** Placeholder shown when the local segment is empty. Defaults to the country's mask. */ placeholder?: string; /** * Language of the built-in copy and of the country names shown in the listbox * (`Intl.DisplayNames`). Unset, the component follows the closest ancestor `lang` * (`` included), else `ro-MD`. */ locale?: LocaleProp; private hasLabelSlot; private hasHelperSlot; private isFocused; private fieldsetDisabled; private highlightedIndex; private countryIso; private liveAnnouncement; /** The host's `aria-label` (attribute or native `ariaLabel` property), mirrored to the internal control when no visible label is present. */ private resolvedAriaLabel?; private searchQuery; /** ISO codes of the rows whose flag was asked for: those that came near the visible part of the list. */ private shownFlags; host: HTMLMudPhoneInputElement; internals: ElementInternals; /** * Fires on every keystroke. `detail.value` is the current canonical * E.164 string; `detail.countryCode` is the active ISO 3166-1 alpha-2. */ mudInput: EventEmitter; /** * Fires when the value is committed (typically on `blur` or `Enter`). * `detail.isValid` reflects whether the local-segment length sits in * the active country's window. */ mudChange: EventEmitter; /** Fires when the user picks a different country from the dropdown. */ mudCountryChange: EventEmitter; /** Fires when the country listbox opens. */ mudOpen: EventEmitter; /** Fires when the country listbox closes. */ mudClose: EventEmitter; /** Fires when the internal input gains focus. The native `FocusEvent` is forwarded as-is. */ mudFocus: EventEmitter; /** Fires when the internal input loses focus. The native `FocusEvent` is forwarded as-is. */ mudBlur: EventEmitter; private readonly instanceId; private readonly labelId; private readonly helperId; private readonly errorId; private readonly triggerId; private readonly listboxId; private readonly inputId; private readonly liveId; private initialValue; private initialCountry; private triggerEl?; private listboxEl?; private listEl?; private flagObserver?; private searchInputEl?; private nativeEl?; private stopAriaLabel?; private stopLang?; connectedCallback(): void; componentDidRender(): void; disconnectedCallback(): void; /** * The list holds every country, and a flag is a file: asking for all of them when it opens would * fetch about 500 KB for rows nobody sees (the browser's own `loading="lazy"` reaches 1250px past * the page, not past the scrolling list). A row's flag is asked for once the row is within two rows * of the visible part of the list, and kept once it was. Without `IntersectionObserver` every row * shows its flag at once. */ private observeRowFlags; private rowFlagUrl; /** Built-in strings in the resolved locale. This component has no override props — * every key is a validity/announcement message or a listbox affordance label. */ private messages; /** The `Intl` tag whose dictionary/region names are shown — the resolved `MudLocale`, canonicalised. */ private displayTag; private displayName; componentWillLoad(): void; onRequiredChange(): void; onLocaleChange(): void; private syncValidity; validateVariant(next: PhoneInputVariant): void; validateSize(next: PhoneInputSize): void; validateType(next: PhoneInputType): void; validateDefaultCountry(next: string): void; handleValueChange(next: string): void; /** Mirrors `disabled` from an ancestor `
`. */ formDisabledCallback(disabled: boolean): void; formResetCallback(): void; formStateRestoreCallback(state: string | File | FormData | null): void; handleDocumentClick(ev: MouseEvent): void; private resolveInitialCountry; /** * The active country list. An explicit `countries` whitelist keeps the caller's * order verbatim; the default list is every country, Moldova first, the rest * sorted by `Intl.Collator` on the resolved display name. Callers must not mutate it. */ private activeCountries; /** * Apply the search-query filter on top of the active list. Empty query → full list. * Matches the displayed (localized) name and the data table's English `name` too, so * "Germany" still finds Germany on a Romanian or Russian page. */ private filteredCountries; private currentCountry; private primeHighlight; private localDigits; private toE164; private formatMasked; private detectCountryFromValue; private onLabelSlotChange; private onHelperSlotChange; private slotHasContent; private handleInput; private handleChange; private handleFocus; private handleBlur; private handlePaste; private isLengthValid; private hasValidationError; private setListboxOpen; private openListbox; private closeListbox; private toggleListbox; private changeCountry; private handleTriggerKeyDown; /** * Shared keyboard-navigation routine used by both the trigger button (when * focus is parked on it after a pointer click) and the search input (where * focus moves on open). Operates on `filteredCountries()` so navigation and * selection stay in sync with the active filter. */ private handleListNavKey; private handleSearchInput; private clearSearch; /** Clear the phone-number value via the trailing × icon. Restores focus to the input. */ private clearValue; private scrollHighlightedIntoView; private handleOptionPointerEnter; private handleOptionClick; private isInert; private resolvedVariant; private hasVisibleLabel; private resolvedErrorText; private hasErrorMessage; private hasHelperMessage; private describedBy; private resolvedPlaceholder; private renderFlag; render(): any; }