From c75a6597fcbbb4977e1557c609779b9ea2f2008d Mon Sep 17 00:00:00 2001
From: ickisIckis <darinafjordur@gmail.com>
Date: Mon, 13 Jan 2025 14:07:40 +0300
Subject: [PATCH] feat(components/select): add localisation to empty and null
 content #2163

---
 .../select/input-select-item.component.html   | 20 +++++++++--
 .../select/input-select.component.html        | 34 ++++++++++++++++---
 .../select/input-select.component.ts          | 16 ++++++---
 .../dropdowns/select/select.options.ts        |  7 ++--
 libs/components/src/lib/tokens/i18n.ts        |  3 ++
 libs/i18n/src/lib/interfaces/language.ts      | 10 +++++-
 .../i18n/src/lib/languages/english/english.ts |  2 ++
 libs/i18n/src/lib/languages/english/index.ts  |  1 +
 libs/i18n/src/lib/languages/english/select.ts |  8 +++++
 libs/i18n/src/lib/languages/russian/index.ts  |  1 +
 .../i18n/src/lib/languages/russian/russian.ts |  2 ++
 libs/i18n/src/lib/languages/russian/select.ts |  8 +++++
 12 files changed, 98 insertions(+), 14 deletions(-)
 create mode 100644 libs/i18n/src/lib/languages/english/select.ts
 create mode 100644 libs/i18n/src/lib/languages/russian/select.ts

diff --git a/libs/components/src/lib/components/dropdowns/select/input-select-item.component.html b/libs/components/src/lib/components/dropdowns/select/input-select-item.component.html
index f387a98a73..24232dceed 100644
--- a/libs/components/src/lib/components/dropdowns/select/input-select-item.component.html
+++ b/libs/components/src/lib/components/dropdowns/select/input-select-item.component.html
@@ -12,11 +12,21 @@
   prizmInputSelectOption
 >
   <ng-container *ngIf="!parent.isNullish(item); else nullContentTemplate">
+    @if (parent.selectTranslation$ | async; as dictionary) {
     <span
       class="text"
       #elem
       *prizmLet="
-        item | prizmCallFunc : parent.stringify : $any(parent.nullContent) | prizmToObservable | async as text
+        item
+          | prizmCallFunc
+            : parent.stringify
+            : $any(
+                parent.nullContent === parent.nullContentTextKey
+                  ? dictionary[parent.nullContentTextKey]
+                  : parent.nullContent
+              )
+          | prizmToObservable
+          | async as text
       "
       [prizmHint]="text"
       [prizmHintHost]="hostHint"
@@ -36,12 +46,18 @@
         {{ text }}
       </ng-container>
     </span>
+    }
   </ng-container>
 
   <ng-template #nullContentTemplate>
     <ng-container *ngIf="parent.nullContent">
       <ng-container *polymorphOutlet="parent.nullContent as content">
-        {{ content }}
+        @if (parent.selectTranslation$ | async; as dictionary) {
+        {{
+          content === parent.nullContentTextKey ? dictionary[parent.nullContentTextKey] : parent.nullContent
+        }}
+
+        }
       </ng-container>
     </ng-container>
   </ng-template>
diff --git a/libs/components/src/lib/components/dropdowns/select/input-select.component.html b/libs/components/src/lib/components/dropdowns/select/input-select.component.html
index 08b6a18baf..5df0f5b650 100644
--- a/libs/components/src/lib/components/dropdowns/select/input-select.component.html
+++ b/libs/components/src/lib/components/dropdowns/select/input-select.component.html
@@ -14,13 +14,21 @@
     (isOpenChange)="opened$$.next($event)"
   >
     <ng-container>
+      @if (selectTranslation$ | async; as dictionary) {
       <ng-container
         *polymorphOutlet="
           valueTemplate && editableTemplate as content;
           context: {
             $implicit: $any(val),
             value: val | prizmCallFunc : transformer,
-            stringify: $any(val | prizmCallFunc : stringify : $any(nullContent) | prizmToObservable | async)
+            stringify: $any(
+              val
+                | prizmCallFunc
+                  : stringify
+                  : $any(nullContent === nullContentTextKey ? dictionary[nullContentTextKey] : nullContent)
+                | prizmToObservable
+                | async
+            )
           }
         "
       >
@@ -54,8 +62,8 @@
           />
         </ng-container>
       </ng-container>
+      }
     </ng-container>
-
     <ng-template #editableTemplate>
       <div
         #focusableElementRef
@@ -70,6 +78,7 @@
         prizmInput
       >
         <ng-container *ngIf="isNotNullish(val); else placeholderTemplate">
+          @if (selectTranslation$ | async; as dictionary) {
           <ng-container
             *polymorphOutlet="
               valueTemplate as content;
@@ -77,19 +86,32 @@
                 $implicit: $any(val),
                 value: val | prizmCallFunc : transformer,
                 stringify: $any(
-                  val | prizmCallFunc : stringify : $any(nullContent) | prizmToObservable | async
+                  val
+                    | prizmCallFunc
+                      : stringify
+                      : $any(
+                          nullContent === nullContentTextKey ? dictionary[nullContentTextKey] : nullContent
+                        )
+                    | prizmToObservable
+                    | async
                 )
               }
             "
           >
             <ng-container
               *prizmLet="
-                val | prizmCallFunc : stringify : $any(nullContent) | prizmToObservable | async as text
+                val
+                  | prizmCallFunc
+                    : stringify
+                    : $any(nullContent === nullContentTextKey ? dictionary[nullContentTextKey] : nullContent)
+                  | prizmToObservable
+                  | async as text
               "
             >
               {{ text }}
             </ng-container>
           </ng-container>
+          }
         </ng-container>
         <ng-template #placeholderTemplate>
           <div class="placeholder">{{ placeholder }}</div>
@@ -124,11 +146,13 @@
           </ng-container>
         </ng-container>
         <ng-template #emptyTemplate>
+          @if (selectTranslation$ | async; as dictionary) {
           <div class="empty-template">
             <ng-container *polymorphOutlet="emptyContent as content">
-              {{ content }}
+              {{ content || dictionary[emptyContentTextKey] }}
             </ng-container>
           </div>
+          }
         </ng-template>
       </prizm-data-list>
     </ng-template>
diff --git a/libs/components/src/lib/components/dropdowns/select/input-select.component.ts b/libs/components/src/lib/components/dropdowns/select/input-select.component.ts
index 4b0ca5e7da..aa8a26b63d 100644
--- a/libs/components/src/lib/components/dropdowns/select/input-select.component.ts
+++ b/libs/components/src/lib/components/dropdowns/select/input-select.component.ts
@@ -27,6 +27,8 @@ import {
   PolymorphOutletDirective,
 } from '../../../directives/polymorph';
 import {
+  EMPTY_CONTENT_TEXT_KEY,
+  NULL_CONTENT_TEXT_KEY,
   PRIZM_SELECT_OPTIONS,
   PrizmSelectOptions,
   PrizmSelectStringify,
@@ -42,6 +44,7 @@ import {
   shareReplay,
   startWith,
   switchMap,
+  take,
   takeUntil,
   tap,
 } from 'rxjs/operators';
@@ -89,11 +92,12 @@ import { PrizmInputSelectDataListDirective } from './input-select-data-list.dire
 import { BooleanInput } from '@angular/cdk/coercion';
 import { PrizmScrollbarDirective } from '../../scrollbar/scrollbar.directive';
 import { PrizmOverlayComponent } from '../../../modules/overlay/overlay.component';
-import { PRIZM_SEARCH_TEXT } from '../../../tokens';
+import { PRIZM_SEARCH_TEXT, PRIZM_SELECT } from '../../../tokens';
 import { prizmI18nInitWithKey } from '../../../services';
 import { PrizmIconsFullComponent } from '@prizm-ui/icons';
 import { PrizmIconsFullRegistry } from '@prizm-ui/icons/core';
 import { prizmIconsMagnifyingGlass, prizmIconsTriangleDown } from '@prizm-ui/icons/full/source';
+import { PrizmLanguageSelect } from '@prizm-ui/i18n';
 
 @Component({
   selector: 'prizm-input-select',
@@ -121,7 +125,6 @@ import { prizmIconsMagnifyingGlass, prizmIconsTriangleDown } from '@prizm-ui/ico
     PrizmSelectInputItemComponent,
     PrizmDropdownHostComponent,
     PrizmToObservablePipe,
-    PrizmInputSelectOptionDirective,
     PrizmIconsFullComponent,
     PrizmFocusableDirective,
   ],
@@ -135,6 +138,7 @@ import { prizmIconsMagnifyingGlass, prizmIconsTriangleDown } from '@prizm-ui/ico
     PrizmInputSelectOptionService,
     { provide: PrizmInputControl, useExisting: PrizmSelectInputComponent },
     ...prizmI18nInitWithKey(PRIZM_SEARCH_TEXT, 'search'),
+    ...prizmI18nInitWithKey(PRIZM_SELECT, 'select'),
   ],
   exportAs: 'prizmSelectInput',
 })
@@ -212,9 +216,12 @@ export class PrizmSelectInputComponent<T>
   @prizmDefaultProp()
   emptyContent: PolymorphContent = this.options.emptyContent;
 
+  readonly nullContentTextKey = NULL_CONTENT_TEXT_KEY;
+  readonly emptyContentTextKey = EMPTY_CONTENT_TEXT_KEY;
+
   @Input()
   @prizmDefaultProp()
-  nullContent: PolymorphContent = this.options.nullContent;
+  nullContent: PolymorphContent = this.options.nullContent ?? this.nullContentTextKey;
 
   override readonly clickable = true;
   readonly isPolymorphPrimitive = isPolymorphPrimitive;
@@ -272,7 +279,8 @@ export class PrizmSelectInputComponent<T>
   constructor(
     @Inject(PRIZM_SELECT_OPTIONS) private readonly options: PrizmSelectOptions<T>,
     @Inject(Injector) injector: Injector,
-    @Inject(PRIZM_SEARCH_TEXT) readonly searchLabelTranslation$: Observable<string>
+    @Inject(PRIZM_SEARCH_TEXT) readonly searchLabelTranslation$: Observable<string>,
+    @Inject(PRIZM_SELECT) readonly selectTranslation$: Observable<PrizmLanguageSelect['select']>
   ) {
     super(injector);
 
diff --git a/libs/components/src/lib/components/dropdowns/select/select.options.ts b/libs/components/src/lib/components/dropdowns/select/select.options.ts
index 02aca8f31e..673f8b0e97 100644
--- a/libs/components/src/lib/components/dropdowns/select/select.options.ts
+++ b/libs/components/src/lib/components/dropdowns/select/select.options.ts
@@ -66,8 +66,8 @@ export const PRIZM_SELECT_DEFAULT_OPTIONS: PrizmSelectOptions<unknown> = {
   dropdownWidth: '100%',
   minDropdownHeight: 0,
   maxDropdownHeight: 342,
-  emptyContent: 'Ничего не найдено',
-  nullContent: 'Не выбрано',
+  emptyContent: null,
+  nullContent: null,
   transformer: item => item,
   searchMatcher: (searchValue: string, item: unknown): boolean => {
     return !!item?.toString()?.toLowerCase().includes(searchValue?.toLowerCase());
@@ -100,3 +100,6 @@ export const prizmSelectOptionsProvider: (options: Partial<PrizmSelectOptions<un
   provide: PRIZM_SELECT_OPTIONS,
   useValue: { ...PRIZM_SELECT_DEFAULT_OPTIONS, ...options },
 });
+
+export const NULL_CONTENT_TEXT_KEY = 'nullContentText';
+export const EMPTY_CONTENT_TEXT_KEY = 'emptyContentText';
diff --git a/libs/components/src/lib/tokens/i18n.ts b/libs/components/src/lib/tokens/i18n.ts
index eeb5bf7fbe..d3823bdae6 100644
--- a/libs/components/src/lib/tokens/i18n.ts
+++ b/libs/components/src/lib/tokens/i18n.ts
@@ -11,6 +11,7 @@ import {
   PrizmLanguageInputLayoutDateTimeRange,
   PrizmLanguageKit,
   PrizmLanguagePaginator,
+  PrizmLanguageSelect,
   PrizmLanguageTimePagination,
   PrizmLanguageTimePicker,
 } from '@prizm-ui/i18n';
@@ -88,3 +89,5 @@ export const PRIZM_TIME_PAGINATION = new InjectionToken<
 export const PRIZM_TIME_PICKER = new InjectionToken<Observable<PrizmLanguageTimePicker['timePicker']>>(
   `time picker i18n text`
 );
+
+export const PRIZM_SELECT = new InjectionToken<Observable<PrizmLanguageSelect['select']>>(`select i18n text`);
diff --git a/libs/i18n/src/lib/interfaces/language.ts b/libs/i18n/src/lib/interfaces/language.ts
index 84c267f2e1..ad4382e058 100644
--- a/libs/i18n/src/lib/interfaces/language.ts
+++ b/libs/i18n/src/lib/interfaces/language.ts
@@ -36,6 +36,13 @@ export interface PrizmLanguageInputLayout {
   };
 }
 
+export interface PrizmLanguageSelect {
+  select: {
+    nullContentText: string;
+    emptyContentText: string;
+  };
+}
+
 export interface PrizmLanguageInputLayoutDateTime {
   inputLayoutDateTime: {
     wrongFormat: string;
@@ -337,6 +344,7 @@ export interface PrizmLanguage
     PrizmLanguageColumnSettings,
     PrizmLanguagePaginator,
     PrizmLanguageTimePagination,
-    PrizmLanguageTimePicker {}
+    PrizmLanguageTimePicker,
+    PrizmLanguageSelect {}
 
 export type PrizmI18nFn<K> = (lan: PrizmLanguageName) => K | Observable<K>;
diff --git a/libs/i18n/src/lib/languages/english/english.ts b/libs/i18n/src/lib/languages/english/english.ts
index 5cb081be82..5b35a1664f 100644
--- a/libs/i18n/src/lib/languages/english/english.ts
+++ b/libs/i18n/src/lib/languages/english/english.ts
@@ -11,6 +11,7 @@ import { PRIZM_ENGLISH_TIME_PAGINATION } from './time-pagination';
 import { PRIZM_ENGLISH_TIME_PICKER } from './time-picker';
 import { PRIZM_ENGLISH_LANGUAGE_KIT } from './kit';
 import { PRIZM_ENGLISH_PAGINATOR } from './paginator';
+import { PRIZM_ENGLISH_SELECT } from './select';
 
 export const PRIZM_ENGLISH_LANGUAGE = {
   name: `english`,
@@ -27,4 +28,5 @@ export const PRIZM_ENGLISH_LANGUAGE = {
   ...PRIZM_ENGLISH_PAGINATOR,
   ...PRIZM_ENGLISH_TIME_PAGINATION,
   ...PRIZM_ENGLISH_TIME_PICKER,
+  ...PRIZM_ENGLISH_SELECT,
 } as PrizmLanguage;
diff --git a/libs/i18n/src/lib/languages/english/index.ts b/libs/i18n/src/lib/languages/english/index.ts
index 927ab3039d..3a049e52a9 100644
--- a/libs/i18n/src/lib/languages/english/index.ts
+++ b/libs/i18n/src/lib/languages/english/index.ts
@@ -11,3 +11,4 @@ export * from './column-settings';
 export * from './paginator';
 export * from './input-layout-date-time';
 export * from './input';
+export * from './select';
diff --git a/libs/i18n/src/lib/languages/english/select.ts b/libs/i18n/src/lib/languages/english/select.ts
new file mode 100644
index 0000000000..9073fbe775
--- /dev/null
+++ b/libs/i18n/src/lib/languages/english/select.ts
@@ -0,0 +1,8 @@
+import { PrizmLanguageSelect } from '../../interfaces';
+
+export const PRIZM_ENGLISH_SELECT: PrizmLanguageSelect = {
+  select: {
+    nullContentText: 'Is not chosen',
+    emptyContentText: 'Nothing found',
+  },
+};
diff --git a/libs/i18n/src/lib/languages/russian/index.ts b/libs/i18n/src/lib/languages/russian/index.ts
index 4c92bdf7c9..840e2425d7 100644
--- a/libs/i18n/src/lib/languages/russian/index.ts
+++ b/libs/i18n/src/lib/languages/russian/index.ts
@@ -11,3 +11,4 @@ export * from './column-settings';
 export * from './paginator';
 export * from './input';
 export * from './input-layout-date-time';
+export * from './select';
diff --git a/libs/i18n/src/lib/languages/russian/russian.ts b/libs/i18n/src/lib/languages/russian/russian.ts
index f982318cec..b11e7157e0 100644
--- a/libs/i18n/src/lib/languages/russian/russian.ts
+++ b/libs/i18n/src/lib/languages/russian/russian.ts
@@ -11,6 +11,7 @@ import { PRIZM_RUSSIAN_TIME_PAGINATION } from './time-pagination';
 import { PRIZM_RUSSIAN_TIME_PICKER } from './time-picker';
 import { PRIZM_RUSSIAN_LANGUAGE_KIT } from './kit';
 import { PRIZM_RUSSIAN_PAGINATOR } from './paginator';
+import { PRIZM_RUSSIAN_SELECT } from './select';
 
 export const PRIZM_RUSSIAN_LANGUAGE = {
   name: `russian`,
@@ -27,4 +28,5 @@ export const PRIZM_RUSSIAN_LANGUAGE = {
   ...PRIZM_RUSSIAN_PAGINATOR,
   ...PRIZM_RUSSIAN_TIME_PAGINATION,
   ...PRIZM_RUSSIAN_TIME_PICKER,
+  ...PRIZM_RUSSIAN_SELECT,
 } as PrizmLanguage;
diff --git a/libs/i18n/src/lib/languages/russian/select.ts b/libs/i18n/src/lib/languages/russian/select.ts
new file mode 100644
index 0000000000..9091e60fe0
--- /dev/null
+++ b/libs/i18n/src/lib/languages/russian/select.ts
@@ -0,0 +1,8 @@
+import { PrizmLanguageSelect } from '../../interfaces';
+
+export const PRIZM_RUSSIAN_SELECT: PrizmLanguageSelect = {
+  select: {
+    nullContentText: 'Не выбрано',
+    emptyContentText: 'Ничего не найдено',
+  },
+};