feat: improved i18n typing across libraries

SAP · Sep 25, 2023 · 3facd7d · 3facd7d
1 parent b7e5b33
commit 3facd7d
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 24 deletions.
diff --git a/libs/core/src/lib/date-picker/date-picker.component.ts b/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';
     }

diff --git a/libs/core/src/lib/slider/slider.component.html b/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"

diff --git a/libs/core/src/lib/split-button/split-button.component.html b/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>

diff --git a/libs/core/src/lib/time/time-column/time-column-config.ts b/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;
 }
diff --git a/libs/platform/src/lib/search-field/search-field.component.html b/libs/platform/src/lib/search-field/search-field.component.html
@@ -61,7 +61,7 @@
                 class="fdp-search-field__input fd-input fd-input-group__input {{ appearance?.searchFieldClass }}"
                 [attr.id]="_inputId"
                 [attr.disabled]="disabled ? '' : null"
-                [attr.aria-label]="ariaLabel || 'platformSearchField.searchInputLabel' | fdTranslate"
+                [attr.aria-label]="ariaLabel || ('platformSearchField.searchInputLabel' | fdTranslate)"
                 [attr.aria-labelledby]="ariaLabelledBy"
                 [attr.aria-controls]="_menuId"
                 [attr.aria-expanded]="

diff --git a/...onents/smart-filter-bar-conditions-dialog/smart-filter-bar-conditions-dialog.component.ts b/...onents/smart-filter-bar-conditions-dialog/smart-filter-bar-conditions-dialog.component.ts
@@ -8,7 +8,7 @@ import {
 } from '@angular/core';
 
 import { DialogRef } from '@fundamental-ngx/core/dialog';
-import { resolveTranslationSync } from '@fundamental-ngx/i18n';
+import { FdLanguageKeyIdentifier, resolveTranslationSync } from '@fundamental-ngx/i18n';
 import { DynamicFormControl, DynamicFormItem, FormGeneratorComponent } from '@fundamental-ngx/platform/form';
 import { SelectItem } from '@fundamental-ngx/platform/shared';
 import { FILTER_STRATEGY, FilterAllStrategy } from '@fundamental-ngx/platform/table';
@@ -160,8 +160,9 @@ export class SmartFilterBarConditionsDialogComponent {
         const labelsConfig = { ...this._conditionLabelKeys };
         for (const strategyItem in labelsConfig) {
             if (Object.prototype.hasOwnProperty.call(labelsConfig, strategyItem)) {
-                const translationKey = labelsConfig[strategyItem];
-                labelsConfig[strategyItem] = this.resolveTranslation('platformSmartFilterBar.' + translationKey);
+                const translationKey = ('platformSmartFilterBar.' +
+                    labelsConfig[strategyItem]) as FdLanguageKeyIdentifier;
+                labelsConfig[strategyItem] = this.resolveTranslation(translationKey);
             }
         }
 

diff --git a/...components/smart-filter-bar-settings-dialog/smart-filter-bar-settings-dialog.component.ts b/...components/smart-filter-bar-settings-dialog/smart-filter-bar-settings-dialog.component.ts
@@ -22,12 +22,12 @@ import {
     TableRowSelectionChangeEvent
 } from '@fundamental-ngx/platform/table';
 
+import { FD_LANGUAGE, FdLanguage, FdLanguageKeyIdentifier, TranslationResolver } from '@fundamental-ngx/i18n';
 import { SmartFilterBarFieldDefinition } from '../../interfaces/smart-filter-bar-field-definition';
-import { SmartFilterSettingsDialogConfig } from '../../interfaces/smart-filter-bar-settings-dialog-config';
 import { FieldFilterItem } from '../../interfaces/smart-filter-bar-field-filter-item';
-import { SmartFilterBarOptionsDataProvider } from './data-provider';
-import { FD_LANGUAGE, FdLanguage, TranslationResolver } from '@fundamental-ngx/i18n';
+import { SmartFilterSettingsDialogConfig } from '../../interfaces/smart-filter-bar-settings-dialog-config';
 import { SmartFilterBarVisibilityCategoryLabels } from '../../interfaces/smart-filter-bar-visibility-category';
+import { SmartFilterBarOptionsDataProvider } from './data-provider';
 
 @Component({
     selector: 'fdp-smart-filter-bar-settings-dialog',
@@ -191,11 +191,9 @@ export class SmartFilterBarSettingsDialogComponent implements Resettable, AfterV
         const labels = { ...this._categoryLabelKeys };
         for (const strategyItem in labels) {
             if (Object.prototype.hasOwnProperty.call(labels, strategyItem)) {
-                const translationKey = labels[strategyItem];
-                labels[strategyItem] = this._translationResolver.resolve(
-                    lang,
-                    'platformSmartFilterBar.' + translationKey
-                );
+                const translationKey = ('platformSmartFilterBar.' +
+                    labels[strategyItem as keyof SmartFilterBarVisibilityCategoryLabels]) as FdLanguageKeyIdentifier;
+                labels[strategyItem] = this._translationResolver.resolve(lang, translationKey);
             }
         }
         for (const [selectValue, selectLabel] of Object.entries(labels)) {

diff --git a/libs/platform/src/lib/smart-filter-bar/interfaces/smart-filter-bar-visibility-category.ts b/libs/platform/src/lib/smart-filter-bar/interfaces/smart-filter-bar-visibility-category.ts
@@ -1,2 +1,13 @@
+import { FdLanguage } from '@fundamental-ngx/i18n';
+
 export type SmartFilterBarVisibilityCategory = 'all' | 'visible' | 'active' | 'visibleAndActive' | 'mandatory';
-export type SmartFilterBarVisibilityCategoryLabels = { [key in SmartFilterBarVisibilityCategory]: string };
+
+type SmartFilterBarCategoryLabelI18nKey = {
+    [Key in keyof FdLanguage['platformSmartFilterBar']]: Key extends `settingsCategory${Capitalize<SmartFilterBarVisibilityCategory>}`
+        ? Key
+        : never;
+};
+
+export type SmartFilterBarVisibilityCategoryLabels = {
+    [key in SmartFilterBarVisibilityCategory]: SmartFilterBarCategoryLabelI18nKey[`settingsCategory${Capitalize<key>}`];
+};
diff --git a/libs/platform/src/lib/smart-filter-bar/interfaces/strategy-labels.type.ts b/libs/platform/src/lib/smart-filter-bar/interfaces/strategy-labels.type.ts
@@ -1,5 +1,13 @@
+import { FdLanguage } from '@fundamental-ngx/i18n';
 import { FILTER_STRATEGY } from '@fundamental-ngx/platform/table';
 
+type SmartFilterBarStrategy = (typeof FILTER_STRATEGY)[keyof typeof FILTER_STRATEGY];
+
+type SmartFilterBarStrategyLabelI18nKey = {
+    [Key in keyof FdLanguage['platformSmartFilterBar']]: Key extends `filterCondition${Capitalize<SmartFilterBarStrategy>}`
+        ? Key
+        : never;
+};
 export type SmartFilterBarStrategyLabels = {
-    [key in (typeof FILTER_STRATEGY)[keyof typeof FILTER_STRATEGY]]: string;
+    [key in SmartFilterBarStrategy]: SmartFilterBarStrategyLabelI18nKey[`filterCondition${Capitalize<key>}`];
 };