import { EventEmitter } from '../../stencil-public-runtime'; import type { PhoneInputChangeDetail, PhoneInputCountryChangeDetail, PhoneInputInputDetail, PhoneInputSize, PhoneInputType, PhoneInputVariant } from './mud-phone-input.types'; /** * 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, a curated diaspora-relevant country list with * inline-SVG flag glyphs, 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. Defaults * to the curated 15-country Moldova-diaspora list when omitted. */ 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; /** * Accessible name. Mirrors to the internal control's `aria-label` when * no visible label is present. Setting `aria-label` directly on the host * also works — captured on connect into `resolvedAriaLabel` and stripped * to avoid Stencil's attribute-observer / render-loop antipattern. */ ariaLabel?: string; private hasLabelSlot; private hasHelperSlot; private isFocused; private fieldsetDisabled; private highlightedIndex; private countryIso; private liveAnnouncement; private resolvedAriaLabel?; private searchQuery; 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 searchInputEl?; private nativeEl?; componentWillLoad(): void; private captureAriaLabel; syncAriaLabelProp(next?: string): void; onRequiredChange(): 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; private activeCountries; /** Apply the search-query filter on top of the active list. Empty query → full list. */ 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; }