monkey-style-guide 21.2.14 → 21.2.15

package/README.md

@@ -15,6 +15,49 @@ Run `ng build monkey-style-guide-v2` to build the project. The build artifacts w
 
 After building your library with `ng build monkey-style-guide-v2`, go to the dist folder `cd dist/monkey-style-guide-v2` and run `npm publish`.
 
+## Internationalization
+
+The library ships its own strings (`MonkeyDictionaryService`) in four buckets: `pt-BR`, `es-CL`,
+`es-MX` and `en-US`. `pt-BR` is the default and the per-key fallback.
+
+By default the active bucket comes from Angular's `LOCALE_ID`, which is fixed at bootstrap. Apps that
+resolve the language later (whitelabel/program config, a language switcher) should provide
+`MECX_I18N_LANG` and push every language change into it — the dictionary then re-renders mounted
+components without remounting them.
+
+```ts
+// app.config.ts
+const i18nLang$ = new BehaviorSubject<string>(env.locale.lang);
+
+providers: [
+  { provide: MECX_I18N_LANG, useValue: i18nLang$ },
+  { provide: LOCALE_ID, useValue: env.locale.lang }
+];
+```
+
+```ts
+// wherever the app switches language
+handleI18N(lang: string, obj?: any): void {
+  if (obj) { this._translateService.setTranslation(lang, obj, true); }
+  this._translateService.use(lang);
+  this._i18nLang.next(lang);
+}
+```
+
+When `MECX_I18N_LANG` is not provided the service behaves as before, reading `LOCALE_ID` once.
+
+Notes:
+
+- A language outside the four buckets falls back to `pt-BR` per key, never to blank labels. A new
+  language needs a full bucket — every key, including the nested `FILTER-BAR.DATE.*`,
+  `FILTER-BAR.OPERATOR.*` and `TABLE.ROW.*` groups — or the UI comes out mixed-language.
+- Overrides pushed through `MECX_I18N_WRAPPER` are merged into the bucket that is active when they
+  arrive, so push the new language into `MECX_I18N_LANG` **before** pushing its overrides.
+- This covers the dictionary only. `LOCALE_ID` also drives Angular's `date`, `currency`, `number` and
+  `percent` pipes, whose locale data is registered at bootstrap and cannot be swapped at runtime — so
+  a switched app can show pt-BR labels next to `MM/dd/yyyy` dates. Use `registerLocaleData` and a
+  reload for pipe formats.
+
 ## Running unit tests
 
 Run `ng test monkey-style-guide-v2` to execute the unit tests via [Karma](https://karma-runner.github.io).

package/fesm2022/monkey-style-guide.mjs

@@ -6,7 +6,7 @@ import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, In
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/forms';
 import { Validators, NgControl, FormsModule, ReactiveFormsModule, FormControlDirective, NgModel, FormControlName, FormGroupDirective, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import { filter, of, map, BehaviorSubject, firstValueFrom, merge, Subject, debounceTime, distinctUntilChanged, switchMap, catchError, Subscription } from 'rxjs';
+import { filter, of, map, BehaviorSubject, combineLatest, distinctUntilChanged, firstValueFrom, merge, Subject, debounceTime, switchMap, catchError, Subscription } from 'rxjs';
 import * as i1$2 from '@angular/cdk/overlay';
 import { Overlay, OverlayPositionBuilder, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
@@ -827,6 +827,7 @@ const MECX_I18N_WRAPPER = new InjectionToken('');
 const MECX_POPOVER_OPTIONS = new InjectionToken('MECX_POPOVER_OPTIONS');
 const MECX_COUNTRY_ISO_CODE = new InjectionToken('BR');
 const MECX_GOOGLE_API_KEY = new InjectionToken('');
+const MECX_I18N_LANG = new InjectionToken('MECX_I18N_LANG');
 function injectTokenWithWarning(token, name) {
     const value = inject(token, { optional: true });
     if (!value) {
@@ -1285,10 +1286,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
+const DEFAULT_LOCALE = 'pt-BR';
 class MonkeyDictionaryService {
     constructor() {
         this._localeId = inject(LOCALE_ID);
         this._destroyRef = inject(DestroyRef);
+        this._lang$ = inject(MECX_I18N_LANG, { optional: true }) ??
+            new BehaviorSubject(this._localeId || DEFAULT_LOCALE);
         this._data$ = new BehaviorSubject({
             'pt-BR': {
                 EDIT: 'Editar',
@@ -1735,7 +1739,7 @@ class MonkeyDictionaryService {
     }
     handleWrapperValues(value) {
         try {
-            const locale = this._localeId || 'pt-BR';
+            const locale = this._lang$.value || DEFAULT_LOCALE;
             const wrappedData = JSON.parse(value);
             const currentData = this._data$.value;
             const updated = {
@@ -1753,10 +1757,10 @@ class MonkeyDictionaryService {
         }
     }
     get(key) {
-        const locale = this._localeId || 'pt-BR';
-        return this._data$.pipe(map((data) => {
-            return data[locale]?.[key] ?? null;
-        }));
+        return combineLatest([this._data$, this._lang$]).pipe(map(([data, lang]) => {
+            const locale = lang || DEFAULT_LOCALE;
+            return data[locale]?.[key] ?? data[DEFAULT_LOCALE]?.[key] ?? null;
+        }), distinctUntilChanged());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyDictionaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyDictionaryService, providedIn: 'root' }); }
@@ -11980,5 +11984,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyComplexFilterBarComponent, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFilterBarService, MonkeyFilterChipComponent, MonkeyFilterMenuComponent, MonkeyFilterMenuItemComponent, MonkeyFilterSegmentComponent, MonkeyFilterTriggerComponent, MonkeyFormDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPassNumberComponent, MonkeyPassSecretNumberComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeyScrollbarComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableCellDirective, MonkeyTableColumnDirective, MonkeyTableComponent, MonkeyTableEmptyDirective, MonkeyTableHeaderCellDirective, MonkeyTableLoadingDirective, MonkeyTableRowDetailDirective, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, addKeys, appliedFrom, ariaSortOf, arityOf, conditionsOf, getCurrencySymbol, indexAtOffset, injectTokenWithWarning, interpolate, isComplete, mergeOrder, offsetOfIndex, panelOf, removeKeys, sameColumnState, selectionState, sortByOrder, toPx, toggleKey, totalHeight, withCondition, withType };
+export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_LANG, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyComplexFilterBarComponent, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFilterBarService, MonkeyFilterChipComponent, MonkeyFilterMenuComponent, MonkeyFilterMenuItemComponent, MonkeyFilterSegmentComponent, MonkeyFilterTriggerComponent, MonkeyFormDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPassNumberComponent, MonkeyPassSecretNumberComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeyScrollbarComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableCellDirective, MonkeyTableColumnDirective, MonkeyTableComponent, MonkeyTableEmptyDirective, MonkeyTableHeaderCellDirective, MonkeyTableLoadingDirective, MonkeyTableRowDetailDirective, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, addKeys, appliedFrom, ariaSortOf, arityOf, conditionsOf, getCurrencySymbol, indexAtOffset, injectTokenWithWarning, interpolate, isComplete, mergeOrder, offsetOfIndex, panelOf, removeKeys, sameColumnState, selectionState, sortByOrder, toPx, toggleKey, totalHeight, withCondition, withType };
 //# sourceMappingURL=monkey-style-guide.mjs.map