import { Color } from '@ionic/core'; /** * Display mode for the language selector. * - 'default': Shows button with label and/or current language * - 'icon': Compact mode showing only a globe icon (ideal for headers) */ export type LanguageSelectorMode = 'default' | 'icon'; /** * Props for val-language-selector component. * A specialized component for language selection. * * @property mode - Display mode: 'default' or 'icon' (compact for headers). * @property icon - Custom icon name for icon mode (default: 'globe-outline'). * @property currentLanguage - Currently selected language code. * @property availableLanguages - Array of available language codes. * @property showLabel - Whether to show the label. * @property label - Custom label text (static). * @property labelConfig - Reactive content configuration for label. * @property showFlags - Whether to show flag icons for languages. * @property color - Button color (Ionic color string). * @property size - Button size ('small' | 'default' | 'large'). * @property fill - Button fill style ('clear' | 'outline' | 'solid' | 'default'). * @property shape - Button shape ('round' | undefined). * @property expand - Button expansion ('full' | 'block' | undefined). * @property disabled - Whether the selector is disabled. * @property customLanguageNames - Custom display names for languages. */ export interface LanguageSelectorMetadata { /** * Display mode for the selector. * - 'default': Full button with label/dropdown * - 'icon': Compact globe icon only (ideal for headers/toolbars) * @default 'default' */ mode?: LanguageSelectorMode; /** * Icon name for icon mode. * @default 'globe-outline' */ icon?: string; /** Currently selected language code */ currentLanguage?: string; /** Array of available language codes */ availableLanguages?: string[]; /** * Whether to show the "Language" label above the selector. * @default false */ showLabel?: boolean; /** Static label text (takes precedence over labelConfig) */ label?: string; /** Reactive content configuration for label */ labelConfig?: { className?: string; key: string; fallback?: string; interpolation?: Record; }; /** Whether to show flag icons for languages */ showFlags?: boolean; /** Button color */ color?: Color; /** Button size */ size?: 'small' | 'default' | 'large'; /** Button fill style */ fill?: 'clear' | 'outline' | 'solid' | 'default'; /** Button shape */ shape?: 'round'; /** Button expansion */ expand?: 'full' | 'block'; /** Whether the selector is disabled */ disabled?: boolean; /** Custom display names for languages */ customLanguageNames?: Record; /** * Force page reload on language change. * By default (false), language changes are reactive without reload. * Set to true for legacy behavior or if reactive updates don't work. * @default false */ forceReload?: boolean; }