# Localization


# Localization

> The component library provides built-in localization support that allows you to translate your components into different languages. The system uses JSON files for translations and automatically detects the user's language preferences.

## Supported Languages

The following languages are supported out of the box:

- English (en)
- Finnish (fi)
- Swedish (sv)
- Norwegian (no)
- Danish (da)

## Adding Translations

To add translations for a new language, create a new JSON file in the `packages/ui/src/i18n/translations` directory. The file should follow the same structure as the existing translation files.

Example structure for a new language file (e.g., `fr.json`):

```json
{
  "validation": {
    "required": "Ce champ est obligatoire"
  },
  "navGroupApp": {
    "selected": "Sélectionné",
    "upgrade": "Obtenir",
    "upgradeLabel": "Obtenir l'accès à cette fonctionnalité"
  },
  "feedbackDialog": {
    "modalTitle": "Envoyer des commentaires",
    "modalText": "Vos commentaires nous aident à améliorer nos produits.",
    "selectLabel": "Sujet",
    "selectPlaceholder": "Sélectionnez un sujet",
    "textareaLabel": "Description",
    "textareaPlaceholder": "Décrivez votre commentaire",
    "btnCancel": "Annuler",
    "btnSend": "Envoyer",
    "successMessage": "Merci pour vos commentaires !"
  }
}
```

## Language Detection

The system automatically detects the language in the following order:

1. HTML document's `lang` attribute
2. Browser's language setting
3. Fallback to 'en' (English)

## Setting Language

You can set the language for all components by updating the document's `lang` attribute:

```html
<html lang="fi">
  <!-- Your components will use Finnish translations -->
</html>
```

Or programmatically:

```typescript
document.documentElement.lang = "fi";
```

Components will automatically update their translations when the document language changes.