feat(i18n): using json formats as a source for tew and added resolve utilities

.eslintrc.json

@@ -10,35 +10,39 @@
                         "allow": [],
                         "depConstraints": [
                             {
-                                "sourceTag": "scope:fd",
-                                "onlyDependOnLibsWithTags": ["scope:fd", "scope:i18n"]
+                                "sourceTag": "scope:cdk",
+                                "onlyDependOnLibsWithTags": ["scope:cdk"]
                             },
                             {
-                                "sourceTag": "scope:fdp",
-                                "onlyDependOnLibsWithTags": ["scope:fd", "scope:fdp", "scope:i18n"]
+                                "sourceTag": "scope:fd",
+                                "onlyDependOnLibsWithTags": ["scope:fd", "scope:i18n", "scope:cdk"]
                             },
                             {
-                                "sourceTag": "scope:fn",
-                                "onlyDependOnLibsWithTags": ["scope:fd", "scope:fn", "scope:i18n"]
+                                "sourceTag": "scope:fdp",
+                                "onlyDependOnLibsWithTags": ["scope:fd", "scope:fdp", "scope:i18n", "scope:cdk"]
                             },
                             {
                                 "sourceTag": "scope:datetime-adapter",
-                                "onlyDependOnLibsWithTags": ["scope:fd", "scope:i18n"]
+                                "onlyDependOnLibsWithTags": ["scope:fd", "scope:i18n", "scope:cdk"]
                             },
                             {
                                 "sourceTag": "scope:cx",
-                                "onlyDependOnLibsWithTags": ["scope:fd", "scope:cx", "scope:i18n"]
+                                "onlyDependOnLibsWithTags": ["scope:fd", "scope:cx", "scope:i18n", "scope:cdk"]
+                            },
+                            {
+                                "sourceTag": "scope:i18n",
+                                "onlyDependOnLibsWithTags": ["scope:cdk"]
                             },
                             {
                                 "sourceTag": "scope:docs",
                                 "onlyDependOnLibsWithTags": [
                                     "scope:docs",
                                     "scope:fd",
                                     "scope:fdp",
-                                    "scope:fn",
                                     "scope:datetime-adapter",
                                     "scope:i18n",
-                                    "scope:cx"
+                                    "scope:cx",
+                                    "scope:cdk"
                                 ]
                             }
                         ],

apps/docs/project.json

@@ -92,6 +92,11 @@
                         "glob": "README.md",
                         "output": "./assets/cdk"
                     },
+                    {
+                        "input": "./libs/i18n",
+                        "glob": "README.md",
+                        "output": "./assets/i18n"
+                    },
                     {
                         "input": "./libs/docs/typedoc",
                         "glob": "**/*",
@@ -130,7 +135,7 @@
                     {
                         "glob": "**/examples/**/*",
                         "input": "libs/docs/i18n",
-                        "output": "./docs/shared/i18n"
+                        "output": "./docs/i18n"
                     },
                     {
                         "glob": "**/examples/**/*",
@@ -235,6 +240,14 @@
                             "with": "apps/docs/src/environments/cx.routes.ts"
                         }
                     ]
+                },
+                "i18n": {
+                    "fileReplacements": [
+                        {
+                            "replace": "apps/docs/src/environments/app.routes.ts",
+                            "with": "apps/docs/src/environments/i18n.routes.ts"
+                        }
+                    ]
                 }
             },
             "outputs": ["{options.outputPath}"],
@@ -270,6 +283,11 @@
                     "port": 4204,
                     "hmr": true
                 },
+                "i18n": {
+                    "browserTarget": "docs:build:i18n",
+                    "port": 4205,
+                    "hmr": true
+                },
                 "hot-module-replacement": {
                     "hmr": true
                 },

apps/docs/src/environments/app.routes.ts

@@ -29,5 +29,12 @@ export const ROUTES: Routes = [
         },
         loadChildren: () => import('@fundamental-ngx/docs/cdk')
     },
+    {
+        path: 'i18n',
+        data: {
+            library: 'I18n'
+        },
+        loadChildren: () => import('@fundamental-ngx/docs/i18n')
+    },
     { path: '', redirectTo: 'core', pathMatch: 'full' }
 ];

apps/docs/src/environments/i18n.routes.ts

@@ -0,0 +1,10 @@
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import ROUTES from '@fundamental-ngx/docs/i18n';
+
+ROUTES[0].path = 'i18n';
+ROUTES.push({
+    path: '**',
+    redirectTo: 'i18n'
+});
+
+export { ROUTES };

libs/cdk/src/lib/data-source/project.json

@@ -40,5 +40,5 @@
             }
         }
     },
-    "tags": ["type:lib", "scope:fd"]
+    "tags": ["type:lib", "scope:cdk"]
 }

libs/cdk/src/lib/forms/project.json

@@ -40,5 +40,5 @@
             }
         }
     },
-    "tags": ["type:lib", "scope:fd"]
+    "tags": ["type:lib", "scope:cdk"]
 }

libs/cdk/src/lib/project.json

@@ -46,5 +46,5 @@
             }
         }
     },
-    "tags": ["type:lib", "scope:fd"]
+    "tags": ["type:lib", "scope:cdk"]
 }

libs/cdk/src/lib/utils/project.json

@@ -40,5 +40,5 @@
             }
         }
     },
-    "tags": ["type:lib", "scope:fd"]
+    "tags": ["type:lib", "scope:cdk"]
 }

libs/core/src/lib/date-picker/date-picker.component.ts

@@ -49,7 +49,7 @@ import { InputGroupInputDirective, InputGroupModule } from '@fundamental-ngx/cor
 import { MobileModeConfig } from '@fundamental-ngx/core/mobile-mode';
 import { PopoverModule, PopoverService } from '@fundamental-ngx/core/popover';
 import { Placement, SpecialDayRule } from '@fundamental-ngx/core/shared';
-import { FdTranslatePipe } from '@fundamental-ngx/i18n';
+import { FdLanguageKeyIdentifier, FdTranslatePipe } from '@fundamental-ngx/i18n';
 import { Subject, Subscription } from 'rxjs';
 import { startWith, takeUntil } from 'rxjs/operators';
 import { DatePickerMobileComponent } from './date-picker-mobile/date-picker-mobile.component';
@@ -451,7 +451,7 @@ export class DatePickerComponent<D>
      * Date input aria label key based on type
      * @hidden
      */
-    get _dateInputArialLabelKey(): string {
+    get _dateInputArialLabelKey(): FdLanguageKeyIdentifier {
         // return either input value or a key for "fdTranslate" pipe
         return this.type === 'range' ? 'coreDatePicker.dateRangeInputLabel' : 'coreDatePicker.dateInputLabel';
     }

libs/core/src/lib/feed-list-item/components/item/feed-list-item.component.html

@@ -58,7 +58,9 @@
         *ngIf="!isRichText && hasMore"
         (click)="toggleTextView()"
         >{{
-            isCollapsed ? ('coreFeedListItem.moreLabel' | fdTranslate) : ('coreFeedListItem.lessLabel' | fdTranslate)
+            isCollapsed
+                ? ('coreFeedListItem.moreLabel' | fdTranslate : { count: (text ? text.length : 0) - maxChars })
+                : ('coreFeedListItem.lessLabel' | fdTranslate)
         }}</a
     >
 </ng-template>

libs/core/src/lib/multi-input/multi-input.component.html

@@ -90,7 +90,7 @@
                     [placeholder]="placeholder"
                     [formControl]="_searchTermCtrl"
                     [attr.aria-required]="required"
-                    [ariaLabel]="ariaLabel || _defaultAriaLabel"
+                    [ariaLabel]="ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)"
                     [ariaLabelledBy]="ariaLabelledBy"
                     [attr.aria-describedby]="tokenHiddenId"
                     (keydown)="_handleInputKeydown($event)"

libs/core/src/lib/multi-input/multi-input.component.ts

@@ -10,7 +10,6 @@ import {
     EventEmitter,
     forwardRef,
     HostListener,
-    Inject,
     Injector,
     Input,
     OnChanges,
@@ -25,7 +24,7 @@ import {
     ViewEncapsulation
 } from '@angular/core';
 import { ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { BehaviorSubject, combineLatest, firstValueFrom, Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs';
 import { distinctUntilChanged, first, map, startWith } from 'rxjs/operators';
 
 import {
@@ -56,7 +55,7 @@ import { CheckboxComponent } from '@fundamental-ngx/core/checkbox';
 import { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
 import { InputGroupModule } from '@fundamental-ngx/core/input-group';
 import { LinkComponent } from '@fundamental-ngx/core/link';
-import { FD_LANGUAGE, FdLanguage, FdTranslatePipe, TranslationResolver } from '@fundamental-ngx/i18n';
+import { FdTranslatePipe } from '@fundamental-ngx/i18n';
 import { MultiInputMobileComponent } from './multi-input-mobile/multi-input-mobile.component';
 import { MULTI_INPUT_COMPONENT, MultiInputInterface } from './multi-input.interface';
 
@@ -386,9 +385,6 @@ export class MultiInputComponent<ItemType = any, ValueType = any>
     @ViewChild(TokenizerComponent)
     tokenizer: TokenizerComponent;
 
-    /** @hidden */
-    _defaultAriaLabel: Nullable<string>;
-
     /** @hidden */
     readonly optionItems$ = new BehaviorSubject<_OptionItem<ItemType, ValueType>[]>([]);
 
@@ -418,9 +414,6 @@ export class MultiInputComponent<ItemType = any, ValueType = any>
     /** @hidden */
     private readonly _rangeSelector = new RangeSelector();
 
-    /** @hidden */
-    private readonly _translationResolver = new TranslationResolver();
-
     /** @hidden */
     constructor(
         readonly _contentDensityObserver: ContentDensityObserver,
@@ -429,7 +422,6 @@ export class MultiInputComponent<ItemType = any, ValueType = any>
         private readonly _dynamicComponentService: DynamicComponentService,
         private readonly _injector: Injector,
         private readonly _viewContainerRef: ViewContainerRef,
-        @Inject(FD_LANGUAGE) private readonly _language: Observable<FdLanguage>,
         @Optional() private readonly _rtlService: RtlService,
         @Optional() private readonly _focusTrapService: FocusTrapService
     ) {}
@@ -496,12 +488,6 @@ export class MultiInputComponent<ItemType = any, ValueType = any>
                 .pipe(map((viewModel) => !viewModel.displayedOptions.some((c) => !c.isSelected)))
                 .subscribe((allItemsSelected) => this.allItemsSelectedChange.emit(allItemsSelected))
         );
-
-        this._subscriptions.add(
-            this._language.subscribe(() => {
-                this._getAriaLabel();
-            })
-        );
     }
 
     /** @hidden */
@@ -954,12 +940,6 @@ export class MultiInputComponent<ItemType = any, ValueType = any>
             })
         );
     }
-
-    /** @hidden */
-    private async _getAriaLabel(): Promise<void> {
-        const lang = await firstValueFrom(this._language);
-        this._defaultAriaLabel = this._translationResolver.resolve(lang, 'coreMultiInput.multiInputAriaLabel');
-    }
 }
 
 interface _OptionItem<ItemType = any, ValueType = any> extends OptionItemBase<ValueType> {

libs/core/src/lib/slider/slider.component.html

@@ -78,7 +78,7 @@
         [attr.tabindex]="disabled ? -1 : 0"
         role="slider"
         [attr.aria-label]="
-            ariaLabel || 'coreSlider.singleMinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }
+            ariaLabel || ('coreSlider.singleMinMaxDetails' | fdTranslate : { min: minValue, max: maxValue })
         "
         [attr.aria-labelledby]="ariaLabelledBy"
         [fdPopoverTrigger]="tooltipMode ? singleSliderPopover : null"
@@ -132,7 +132,7 @@
         [attr.tabindex]="disabled ? -1 : 0"
         role="slider"
         [attr.aria-label]="
-            ariaLabel || 'coreSlider.multipleHandle1MinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }
+            ariaLabel || ('coreSlider.multipleHandle1MinMaxDetails' | fdTranslate : { min: minValue, max: maxValue })
         "
         [attr.aria-labelledby]="ariaLabelledBy"
         [fdPopoverTrigger]="tooltipMode ? rangeSliderPopover1 : null"
@@ -166,7 +166,7 @@
         [attr.tabindex]="disabled ? -1 : 0"
         role="slider"
         [attr.aria-label]="
-            ariaLabel || 'coreSlider.multipleHandle2MinMaxDetails' | fdTranslate : { min: minValue, max: maxValue }
+            ariaLabel || ('coreSlider.multipleHandle2MinMaxDetails' | fdTranslate : { min: minValue, max: maxValue })
         "
         [attr.aria-labelledby]="ariaLabelledBy"
         [fdPopoverTrigger]="tooltipMode ? rangeSliderPopover2 : null"

libs/core/src/lib/split-button/split-button.component.html

@@ -26,7 +26,7 @@
         [fdType]="fdType"
         [disabled]="disabled"
         [ariaLabel]="'coreSplitButton.expandButtonAriaLabel' | fdTranslate"
-        [attr.title]="expandButtonTitle || 'coreSplitButton.expandButtonAriaLabel' | fdTranslate"
+        [attr.title]="expandButtonTitle || ('coreSplitButton.expandButtonAriaLabel' | fdTranslate)"
         [class.is-active]="menu.isOpen"
     ></button>
     <ng-content select="fd-menu"></ng-content>

libs/core/src/lib/time/time-column/time-column-config.ts

@@ -1,6 +1,8 @@
+import { FdLanguageKeyIdentifier } from '@fundamental-ngx/i18n';
+
 export interface TimeColumnConfig {
-    decreaseLabel: string;
-    increaseLabel: string;
-    label: string;
-    navigationInstruction: string;
+    decreaseLabel: FdLanguageKeyIdentifier;
+    increaseLabel: FdLanguageKeyIdentifier;
+    label: FdLanguageKeyIdentifier;
+    navigationInstruction: FdLanguageKeyIdentifier;
 }

libs/core/src/lib/wizard/wizard.component.ts

@@ -23,8 +23,8 @@ import { Nullable, scrollTop } from '@fundamental-ngx/cdk/utils';
 import { DialogBodyComponent, FD_DIALOG_BODY_COMPONENT } from '@fundamental-ngx/core/dialog';
 import { ScrollSpyDirective } from '@fundamental-ngx/core/scroll-spy';
 import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
-import { FD_LANGUAGE, FdLanguage, TranslationResolver } from '@fundamental-ngx/i18n';
-import { Observable, Subscription } from 'rxjs';
+import { resolveTranslationSignal } from '@fundamental-ngx/i18n';
+import { Subscription } from 'rxjs';
 import { ACTIVE_STEP_STATUS, COMPLETED_STEP_STATUS, CURRENT_STEP_STATUS, UPCOMING_STEP_STATUS } from './constants';
 import { WizardContentComponent } from './wizard-content/wizard-content.component';
 import { WIZARD } from './wizard-injection-token';
@@ -70,7 +70,8 @@ export const handleTimeoutReference = (): void => {
         }
     ],
     host: {
-        role: 'region'
+        role: 'region',
+        '[attr.aria-label]': 'ariaLabel || _defaultAriaLabel()'
     },
     standalone: true,
     imports: [NgIf, ScrollSpyDirective, CdkScrollable, ScrollbarDirective, NgFor, NgTemplateOutlet]
@@ -106,7 +107,6 @@ export class WizardComponent implements AfterViewInit, OnDestroy {
      * If not provided, is being translated by i18n package
      */
     @Input()
-    @HostBinding('attr.aria-label')
     ariaLabel: string;
 
     /** @hidden */
@@ -139,13 +139,13 @@ export class WizardComponent implements AfterViewInit, OnDestroy {
     stackedStepsRight: WizardStepComponent[] = [];
 
     /** @hidden */
-    private _stepEventSubscriptions: Subscription = new Subscription();
+    protected _defaultAriaLabel = resolveTranslationSignal('coreWizard.ariaLabel');
 
     /** @hidden */
-    private _subscriptions: Subscription = new Subscription();
+    private _stepEventSubscriptions: Subscription = new Subscription();
 
     /** @hidden */
-    private _translationResolver = new TranslationResolver();
+    private _subscriptions: Subscription = new Subscription();
 
     /** @hidden */
     private _previousWidth: number;
@@ -154,15 +154,8 @@ export class WizardComponent implements AfterViewInit, OnDestroy {
     constructor(
         private _elRef: ElementRef,
         private readonly _cdRef: ChangeDetectorRef,
-        @Inject(FD_LANGUAGE) _language$: Observable<FdLanguage>,
         @Optional() @Inject(FD_DIALOG_BODY_COMPONENT) private _dialogBodyComponent: DialogBodyComponent
-    ) {
-        const sub = _language$.subscribe((lang) => {
-            // set ariaLabel only if it's not applied manually
-            this.ariaLabel ??= this._translationResolver.resolve(lang, 'coreWizard.ariaLabel');
-        });
-        this._subscriptions.add(sub);
-    }
+    ) {}
 
     /** @hidden */
     @HostListener('window:resize')

libs/docs/cdk/docs-data.ts

@@ -3,8 +3,7 @@ import { SectionInterface, SectionInterfaceContent } from '@fundamental-ngx/docs
 
 export const guides: SectionInterfaceContent[] = [
     { url: 'cdk/home', name: 'Home' },
-    { url: 'cdk/new-component', name: 'New Component' },
-    { url: 'cdk/i18n', name: 'I18n' }
+    { url: 'cdk/new-component', name: 'New Component' }
 ];
 
 export const directives: SectionInterfaceContent[] = [