import { EventEmitter } from "../../stencil-public-runtime";
import { A11yComponent, ThemeableComponent } from "../../common";
import { DuetLanguage, DuetMargin, DuetTheme } from "../../common-types";
import { Country } from "../../data/countries";
import { DuetLangObject } from "../../utils/language-utils";
export type DuetPhoneInputEvent = {
    originalEvent?: Event;
    component: "duet-phone-input";
    value: string;
    countryCode?: string;
};
export declare class DuetPhoneInput implements ThemeableComponent, A11yComponent {
    private duetInputElement;
    private countryCodeButton;
    private countryCodePopup;
    private countriesToList;
    private countryFlagCDNUrl;
    private inputId;
    private buttonAriaLabel;
    /**
     * Reference to host HTML element.
     */
    element: HTMLElement;
    language: DuetLanguage;
    currentCountry: Country | "error";
    /**
     * Theme of the input.
     */
    theme: DuetTheme;
    /**
     * Controls the margin of the component.
     */
    margin: DuetMargin;
    /**
     * Expands the input to fill 100% of the container width.
     */
    expand: boolean;
    /**
     * Adds a unique identifier for the input.
     */
    identifier: string;
    /**
     * Details of the component
     */
    accessibleDetails: string;
    /**
     * String of id's that indicate alternative labels elements
     */
    accessibleLabelledBy: string;
    /**
     * Aria description the button
     */
    accessibleDescription: string;
    /**
     * Indicates the id of a component that describes the input.
     */
    accessibleDescribedBy: string;
    /**
     * Makes the phone input component disabled. This prevents users from being able to
     * interact with the input, and conveys its inactive state to assistive technologies.
     */
    disabled: boolean;
    /**
     * Set whether the input is required or not. Please note that this is required for
     * accessible inputs when the user is required to fill them. When using this property
     * you need to also set “novalidate” attribute to your form element to prevent
     * browser from displaying its own validation errors.
     */
    required: boolean;
    /**
     * The phone input itself contains a comprehensive list of countries and their telephone country codes and it is
     * advisable to hold to that. There may be situations where the set of possible country codes is narrowed down: e.g.
     * if we have established that the person giving their details has a Nordic phone number, then we can give a narrowed
     * down list. Do not make unjustified assumptions: e.g. a Finnish company may well have employees in Afganistan or
     * Bhutan. List of countries can be given either as array of ISO 3166-1 alpha-2 codes or array of objects with keys:
     * en, fi, sv, isoCode (two uppercase letters), telephoneCountryCode (one to three digits), or JSON array string of
     * either two.
     */
    get countries(): Country[] | string[] | string;
    set countries(countriesProp: Country[] | string[] | string);
    /**
     * Defaults for Label
     * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
     */
    labelDefaults: DuetLangObject | string;
    /**
     * Label for the number input.
     * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
     */
    label: string;
    /**
     * Visually hide the label, but still show it to screen readers.
     */
    labelHidden: boolean;
    /**
     * Caption (underneath label) that can be set as a way of adding extra information
     */
    caption: string;
    /**
     * Name of the input.
     */
    name: string;
    /**
     * Display the input in error state along with an error message.
     */
    error: string;
    /**
     * Tooltip to display next to the label of the input.
     */
    tooltip: string;
    /**
     * Use maxlength to specify the maximum length of the value that can be entered.
     */
    maxlength: number;
    /**
     * Use minlength to specify the minimum length of the value that can be entered.
     */
    minlength: number;
    /**
     * Value of the input.
     */
    get value(): string;
    set value(val: string);
    /**
     * If the value is set above before the component has rendered, the ref to duetInputElement has not yet been set.
     * In these cases we set the value to this.pendingValue and after the first render pass it on to this.duetInputElement.
     */
    private pendingValue;
    /**
     * This is a proxy for the enclosed native inputs validity
     */
    get validity(): ValidityState;
    /**
     * Countries to list at the top of the popup-menu, given as an array or comma separated list of ISO 3166-2 codes.
     * @default ["FI", "SE"]
     */
    listFirst: string | string[];
    /**
     * Emitted when the value has changed.
     */
    duetChange: EventEmitter<DuetPhoneInputEvent>;
    /**
     * Emitted when a keyboard input has ocurred.
     */
    duetInput: EventEmitter<DuetPhoneInputEvent>;
    /**
     * Emitted when the input loses focus.
     */
    duetBlur: EventEmitter<DuetPhoneInputEvent>;
    /**
     * Emitted when the input has focus.
     */
    duetFocus: EventEmitter<DuetPhoneInputEvent>;
    /**t
     * Component lifecycle events.
     */
    componentWillLoad(): void;
    componentDidLoad(): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /**
     * Sets focus on the contained input element, use this instead of the native `input.focus()`.
     */
    setFocus(options?: FocusOptions): Promise<void>;
    private setListFirstCountries;
    private handleFocus;
    private handleChange;
    private handleBlur;
    private handleInput;
    private handleCountryCodeSelectorOpen;
    private handleCountryCodeSelectorSelect;
    private setInputCountryCode;
    private findCountryCode;
    private findCountryForCode;
    private renderFlag;
    private getFlagForButton;
    render(): any;
}