import { LitElement, type TemplateResult, type PropertyValues, nothing } from 'lit';
import '../../../md/chip/ui-chip-set.js';
import '../../../md/chip/ui-chip.js';
import '../../../md/select/ui-select.js';
import '../../../md/select/ui-option.js';
/**
 * Represents a currency with all its display information.
 */
export interface Currency {
    /** ISO 4217 currency code (e.g., 'USD', 'EUR') */
    code: string;
    /** Full name of the currency (e.g., 'US Dollar', 'Euro') */
    name: string;
    /** Currency symbol (e.g., '$', '€') */
    symbol: string;
    /** Country or region name (e.g., 'United States', 'European Union') */
    country: string;
    /** Flag emoji representing the currency's origin */
    flag: string;
}
/**
 * Represents an error that can occur in the CurrencyPicker component.
 */
export interface CurrencyPickerError {
    /** Type of error: validation, selection constraint, or internal error */
    type: 'validation' | 'selection' | 'internal';
    /** Human-readable error message */
    message: string;
    /** Optional additional details about the error for debugging */
    details?: Record<string, unknown>;
}
/**
 * Event detail interface for currency picker error events.
 */
export interface CurrencyPickerErrorEvent {
    /** The error information */
    error: CurrencyPickerError;
}
/**
 * A web component for selecting currencies with chips display.
 * Provides a searchable interface with country flags and currency information.
 *
 * This component uses ElementInternals for native form integration and
 * follows web standards for error handling and validation.
 *
 * ## Features
 * - Single or multi-select currency selection
 * - Visual chips display for selected currencies
 * - Native form integration with ElementInternals
 * - Comprehensive validation and error handling
 * - Accessibility support with ARIA attributes
 * - Keyboard navigation support
 * - Currency filtering based on allowed currencies
 *
 * ## Usage
 * ```html
 * <!-- Basic usage -->
 * <currency-picker></currency-picker>
 *
 * <!-- Multi-select with allowed currencies -->
 * <currency-picker multi .allowedCurrencies="${['USD', 'EUR', 'GBP']}"></currency-picker>
 *
 * <!-- Form integration -->
 * <form>
 *   <currency-picker name="currencies" required></currency-picker>
 * </form>
 * ```
 *
 * @fires change - Dispatched when selected currencies change due to user interaction.
 *                 Contains {currencies: Currency[], codes: string[]} in event.detail
 * @fires error - Dispatched when validation or other errors occur.
 *                Contains {error: CurrencyPickerError} in event.detail
 *
 * @example
 * ```typescript
 * const picker = document.querySelector('currency-picker');
 * picker.addEventListener('change', (e) => {
 *   console.log('Selected currencies:', e.detail.currencies);
 * });
 * picker.addEventListener('error', (e) => {
 *   console.error('Picker error:', e.detail.error.message);
 * });
 * ```
 */
export default class CurrencyPicker extends LitElement {
    /**
     * Indicates that this custom element is form-associated and can participate in form submission.
     * This enables the component to work with native HTML forms and use ElementInternals.
     */
    static formAssociated: boolean;
    /**
     * Private ElementInternals instance for form integration and validation.
     * Provides access to form APIs like setFormValue, setValidity, etc.
     */
    private internals;
    /**
     * Shadow root configuration for the component.
     * Uses 'open' mode for accessibility and delegates focus to enable proper focus management.
     */
    static shadowRootOptions: ShadowRootInit;
    /**
     * The currently selected currency codes.
     * This is an array of ISO 4217 currency codes (e.g., 'USD', 'EUR').
     */
    accessor selected: string[];
    /**
     * The currencies that should be available for selection.
     * If not specified, all supported currencies will be available.
     * This is an array of ISO 4217 currency codes (e.g., 'USD', 'EUR').
     */
    accessor allowedCurrencies: string[];
    /**
     * The label for the currency selection dropdown.
     * This is displayed as the label for the select input.
     * @attribute
     */
    accessor label: string;
    /**
     * The name attribute for the currency selection dropdown.
     * This is used when submitting forms that include this component.
     * @attribute
     */
    accessor name: string | undefined;
    /**
     * Supporting text for the currency selection dropdown.
     * This is displayed below the select input.
     * @attribute
     */
    accessor supportingText: string | undefined;
    /**
     * Whether the currency selection is required.
     * If true, the component will enforce at least one currency to be selected.
     * @attribute
     */
    accessor required: boolean;
    /**
     * Whether the currency selection is disabled.
     * If true, the component will not allow any changes to the selected currencies.
     * @attribute
     */
    accessor disabled: boolean;
    /**
     * Whether multiple currencies can be selected.
     * If true, the component allows selecting multiple currencies.
     * If false, only one currency can be selected at a time.
     * @attribute
     */
    accessor multi: boolean;
    /**
     * Whether to show errors inline within the component.
     * If true, errors will be displayed below the component.
     * If false, errors will only be dispatched as events.
     * @attribute
     */
    accessor showErrors: boolean;
    /**
     * The currently selectable currencies (filtered based on selection and allowed currencies).
     * This is automatically updated based on the selected currencies and allowedCurrencies property.
     */
    private accessor selectableCurrencies;
    /**
     * Reference to the Material Design outlined select element.
     * Used to manage the select's internal state and keep it synchronized with the component's selected property.
     */
    private accessor selectElement;
    /**
     * Returns the form element that contains this component, if any.
     * Part of the ElementInternals API for form-associated custom elements.
     */
    get form(): HTMLFormElement | null;
    /**
     * Returns the validity state of the component.
     * Part of the ElementInternals API for form-associated custom elements.
     */
    get validity(): ValidityState;
    /**
     * Returns the validation message for the component.
     * Part of the ElementInternals API for form-associated custom elements.
     */
    get validationMessage(): string;
    /**
     * Returns whether the component will be validated when the form is submitted.
     * Part of the ElementInternals API for form-associated custom elements.
     */
    get willValidate(): boolean;
    /**
     * Checks the validity of the component without displaying validation UI.
     * Part of the ElementInternals API for form-associated custom elements.
     * @returns True if the component is valid, false otherwise
     */
    checkValidity(): boolean;
    /**
     * Checks the validity of the component and displays validation UI if invalid.
     * Part of the ElementInternals API for form-associated custom elements.
     * @returns True if the component is valid, false otherwise
     */
    reportValidity(): boolean;
    /**
     * Master list of supported currencies with their display information.
     * This includes popular currencies with their ISO codes, names, symbols, countries, and flag emojis.
     * Private and readonly to ensure data integrity.
     */
    private readonly currencies;
    constructor();
    connectedCallback(): void;
    /**
     * Updates the form value using ElementInternals.
     */
    private updateFormValue;
    protected willUpdate(changed: PropertyValues<this>): void;
    /**
     * Called after the component has been updated and rendered.
     * Ensures the select element's value stays synchronized with the component's selected state.
     */
    protected updated(changed: PropertyValues<this>): void;
    /**
     * Sets an error state using ElementInternals and optionally dispatches an error event.
     * @param error The error to set
     * @param dispatch Whether to dispatch an error event (default: true)
     */
    private setError;
    /**
     * Dispatches an error event.
     * @param error The error to dispatch
     */
    private dispatchErrorEvent;
    /**
     * Clears the current error state using ElementInternals.
     */
    private clearError;
    /**
     * Validates currency codes against the supported currencies.
     * @param codes Array of currency codes to validate
     * @returns Array of invalid currency codes
     */
    private validateCurrencyCodes;
    /**
     * Safely validates and filters currency codes, setting errors for invalid codes.
     * @param codes Array of currency codes to validate
     * @param property Name of the property being validated
     * @returns Array of valid currency codes
     */
    private safeCurrencyValidation;
    /**
     * Validates selection constraints using ElementInternals.
     * @param newSelection The new selection to validate
     * @returns Whether the selection is valid
     */
    private validateSelectionConstraints;
    private updateSelectableCurrencies;
    private handleCurrencySelect;
    private handleRemoveCurrency;
    private dispatchChangeEvent;
    /**
     * Get the currently selected currency codes as a copy of the array.
     * This is a read-only getter that returns a shallow copy to prevent external modification.
     * @returns Array of selected ISO 4217 currency codes
     */
    get selectedCurrencyCodes(): string[];
    /**
     * Get the full currency objects for currently selected currencies.
     * This method looks up each selected currency code in the master currencies list
     * and returns the complete currency information including name, symbol, country, and flag.
     * @returns Array of complete Currency objects for selected currencies
     */
    getSelectedCurrencies(): Currency[];
    /**
     * Clear all selected currencies.
     * This method removes all selections, validates constraints (such as required),
     * updates the UI, and dispatches a change event. If validation fails (e.g.,
     * component is required), the operation will be cancelled and an error will be set.
     * @throws Will dispatch an error event if validation fails or an internal error occurs
     */
    clearSelection(): void;
    /**
     * Form state restore callback for ElementInternals.
     * This method is called by the browser when form state is being restored
     * (e.g., browser back/forward navigation, form autofill).
     * It parses a comma-separated string of currency codes and restores the selection.
     * @param state The state to restore - typically a comma-separated string of currency codes
     * @param _mode The restore mode (unused in this implementation)
     */
    formStateRestoreCallback(state: string | FormData | null): void;
    /**
     * Form reset callback for ElementInternals.
     * This method is called by the browser when the containing form is reset.
     * It clears all selections, updates the UI, clears any errors, and updates the form value.
     */
    formResetCallback(): void;
    /**
     * Main render method for the component.
     * Renders the currency selector with dropdown, selected chips (if multi-select), and error display.
     * Updates ARIA attributes and error states based on current component state.
     * @returns TemplateResult containing the complete component HTML
     */
    render(): TemplateResult;
    /**
     * Renders error messages when showErrors is true and the component is invalid.
     * The error display uses ARIA live regions for accessibility.
     * @returns TemplateResult with error display or nothing if no errors should be shown
     */
    protected renderError(): TemplateResult | typeof nothing;
    /**
     * Renders the selected currencies as removable chips in multi-select mode.
     * Only renders when multi=true and there are selected currencies.
     * Each chip displays the currency flag and code, and can be removed by the user.
     * @returns TemplateResult with chip display or nothing if not applicable
     */
    protected renderSelected(): TemplateResult | typeof nothing;
}
//# sourceMappingURL=Picker.d.ts.map