LuccaSA
feat(core): add translation override inputs
Description
Overriding LF's translations is painful because, using DI, we have to provide:
- all keys for a given component
- all langages
For example, if I want to replace the emptyResults displayed on the lu-simple-select panel. I have to add:
@Component({
providers: [
{
provide: LU_SIMPLE_SELECT_TRANSLATIONS,
useFactory: () => {
const transloco = inject(TranslocoService);
return Object.fromEntries(
Object.entries(luSimpleSelectTranslations).map(
([lang, baseTranslations]) => [
lang,
{
...baseTranslations,
emptyResults: transloco.translate('EMPTY_RESULT', undefined, { lang })
}
] as const
)
);
}
}
],
})
class ExampleComponent { }
The problem is that we almost always load only one lang at a time and that the previous system only allow synchronous methods.
Here is a WIP proposal: provide a intl input on every component.
Here is the same override with this solution:
@Component({
template: `
<lu-simple-select [intl]="{ emptyResults: 'EMPTY_RESULT' | transloco }" />
`
})
class ExampleComponent { }
The input accept a partial of the component's translation and only on the displayed lang.
In order to harmonize, we should remove some inputs that allow translation override in a very local way:
[addOptionLabel]="'new label'"could be replaced with[intl]="{ addOptionLabel: 'new label' }"- more to come
Optionally, technical or more in-depth description for reviewers. Keep an empty line under your text, as well as the 5 lines that follow it.
