feat(components/input-layout-date-time-range): add localization for time label #2128

libs/components/src/lib/components/input/input-date-time-range/input-layout-date-time-range.component.html

@@ -132,8 +132,9 @@
  (prizmAfterViewInit)="markAsTouched()"
  (valueChange)="onRangeChange($event)"
  >
+ @let timeStr = dictionary$ | async | prizmPluck : 'time';
  <ng-container footerFrom>
- <prizm-input-layout label="Время">
+ <prizm-input-layout [label]="timeStr">
  <prizm-input-layout-time
  [style.--prizm-dropdown-host-width]="'100%'"
  [ngModelOptions]="{ standalone: true }"
@@ -147,7 +148,7 @@
  </prizm-input-layout>
  </ng-container>
  <ng-container footerTo>
- <prizm-input-layout label="Время">
+ <prizm-input-layout [label]="timeStr">
  <prizm-input-layout-time
  [style.--prizm-dropdown-host-width]="'100%'"
  [ngModelOptions]="{ standalone: true }"

libs/components/src/lib/components/input/input-date-time-range/input-layout-date-time-range.component.ts

@@ -30,11 +30,11 @@ import { PRIZM_DATE_SEPARATOR } from '../../../@core/date-time/date-separator';
 import { PrizmDialogService } from '../../dialogs/dialog/dialog.service';
 import { PRIZM_DATE_FORMAT } from '../../../@core/date-time/date-format';
 import { PrizmDateMode } from '../../../types/date-mode';
-import { PRIZM_DATE_TEXTS, PRIZM_TIME_TEXTS } from '../../../tokens/i18n';
+import { PRIZM_DATE_TEXTS, PRIZM_INPUT_LAYOUT_DATE_TIME_RANGE, PRIZM_TIME_TEXTS } from '../../../tokens/';
 import { PRIZM_DATE_TIME_RANGE_VALUE_TRANSFORMER } from '../../../tokens/date-inputs-value-transformers';
 import { PrizmControlValueTransformer } from '../../../types/control-value-transformer';
 import { prizmNullableSame } from '../../../util/common/nullable-same';
-import { filterTruthy, PrizmDestroyService, PrizmLetDirective } from '@prizm-ui/helpers';
+import { filterTruthy, PrizmDestroyService, PrizmLetDirective, PrizmPluckPipe } from '@prizm-ui/helpers';
 import { PrizmInputControl } from '../common/base/input-control.class';
 import { PrizmInputNgControl } from '../common/base/input-ng-control.class';
 import { debounceTime, delay, distinctUntilChanged, map, share, takeUntil, tap } from 'rxjs/operators';
@@ -67,6 +67,7 @@ import { PrizmIconsFullRegistry } from '@prizm-ui/icons/core';
 import { prizmIconsCalendarRange, prizmIconsClock } from '@prizm-ui/icons/full/source';
 import { transformDateIfNeeded } from '../../../@core/date-time/date-transform-util';
 import { PrizmTimeConstraintsPipe } from '../../../pipes/time-constraints/time-constraints.pipe';
+import { PrizmLanguageInputLayoutDateTimeRange } from 'libs/i18n/src/lib/interfaces';
 
 @Component({
  selector: `prizm-input-layout-date-time-range`,
@@ -79,6 +80,7 @@ import { PrizmTimeConstraintsPipe } from '../../../pipes/time-constraints/time-c
  ...prizmI18nInitWithKeys({
  time: PRIZM_TIME_TEXTS,
  dateTexts: PRIZM_DATE_TEXTS,
+ inputLayoutDateTimeRange: PRIZM_INPUT_LAYOUT_DATE_TIME_RANGE,
  }),
  {
  provide: NG_VALUE_ACCESSOR,
@@ -104,6 +106,7 @@ import { PrizmTimeConstraintsPipe } from '../../../pipes/time-constraints/time-c
  PrizmValueAccessorDirective,
  FormsModule,
  PrizmTimeConstraintsPipe,
+ PrizmPluckPipe,
  ],
 })
 export class PrizmInputLayoutDateTimeRangeComponent
@@ -257,6 +260,10 @@ export class PrizmInputLayoutDateTimeRangeComponent
  @Inject(PRIZM_DATE_FORMAT)
  readonly dateFormat: PrizmDateMode,
  @Inject(PRIZM_DATE_SEPARATOR) readonly dateSeparator: string,
+ @Inject(PRIZM_INPUT_LAYOUT_DATE_TIME_RANGE)
+ public readonly dictionary$: Observable<
+ PrizmLanguageInputLayoutDateTimeRange['inputLayoutDateTimeRange']
+ >,
  @Inject(PRIZM_DATE_TEXTS)
  readonly dateTexts$: Observable<Record<PrizmDateMode, string>>,
  @Optional()

libs/components/src/lib/tokens/i18n.ts

@@ -9,6 +9,7 @@ import {
  PrizmLanguageInputLayout,
  PrizmLanguageInputLayoutDateRelative,
  PrizmLanguageInputLayoutDateTime,
+ PrizmLanguageInputLayoutDateTimeRange,
  PrizmLanguageKit,
  PrizmLanguagePaginator,
 } from '@prizm-ui/i18n';
@@ -29,6 +30,10 @@ export const PRIZM_INPUT_LAYOUT_DATE_TIME = new InjectionToken<
  Observable<PrizmLanguageInputLayoutDateTime['inputLayoutDateTime']>
 >(`Localized for input layout date time component`);
 
+export const PRIZM_INPUT_LAYOUT_DATE_TIME_RANGE = new InjectionToken<
+ Observable<PrizmLanguageInputLayoutDateTimeRange['inputLayoutDateTimeRange']>
+>(`Localized for input layout date time range component`);
+
 export const PRIZM_CRON = new InjectionToken<Observable<PrizmLanguageCron['cron']>>(
  `Localized for cron component`
 );

libs/i18n/src/lib/interfaces/language.ts

@@ -41,6 +41,12 @@ export interface PrizmLanguageInputLayoutDateTime {
  };
 }
 
+export interface PrizmLanguageInputLayoutDateTimeRange {
+ inputLayoutDateTimeRange: {
+ time: string;
+ };
+}
+
 export interface PrizmLanguageCronSwitcherTitles {
  second: string;
  minute: string;
@@ -310,6 +316,7 @@ export interface PrizmLanguage
  PrizmLanguageCron,
  PrizmLanguageInputLayoutDateRelative,
  PrizmLanguageInputLayoutDateTime,
+ PrizmLanguageInputLayoutDateTimeRange,
  PrizmLanguageFileUpload,
  PrizmLanguageColumnSettings,
  PrizmLanguagePaginator {}

libs/i18n/src/lib/languages/english/english.ts

@@ -8,6 +8,7 @@ import { PRIZM_ENGLISH_COLUMN_SETTINGS } from './column-settings';
 import { PRIZM_ENGLISH_PAGINATOR } from './paginator';
 import { PRIZM_ENGLISH_INPUT_LAYOUT_DATE_TIME } from './input-layout-date-time';
 import { PRIZM_ENGLISH_INPUT } from './input';
+import { PRIZM_ENGLISH_INPUT_LAYOUT_DATE_TIME_RANGE } from './input-layout-date-time-range';
 
 export const PRIZM_ENGLISH_LANGUAGE = {
  name: `english`,
@@ -18,6 +19,7 @@ export const PRIZM_ENGLISH_LANGUAGE = {
  ...PRIZM_ENGLISH_INPUT,
  ...PRIZM_ENGLISH_INPUT_LAYOUT_DATE_RELATIVE,
  ...PRIZM_ENGLISH_INPUT_LAYOUT_DATE_TIME,
+ ...PRIZM_ENGLISH_INPUT_LAYOUT_DATE_TIME_RANGE,
  ...PRIZM_ENGLISH_CRON,
  ...PRIZM_ENGLISH_COLUMN_SETTINGS,
  ...PRIZM_ENGLISH_PAGINATOR,

libs/i18n/src/lib/languages/english/input-layout-date-time-range.ts

@@ -0,0 +1,7 @@
+import { PrizmLanguageInputLayoutDateTimeRange } from '../../interfaces';
+
+export const PRIZM_ENGLISH_INPUT_LAYOUT_DATE_TIME_RANGE: PrizmLanguageInputLayoutDateTimeRange = {
+ inputLayoutDateTimeRange: {
+ time: 'Time',
+ },
+};

libs/i18n/src/lib/languages/russian/input-layout-date-time-range.ts

@@ -0,0 +1,7 @@
+import { PrizmLanguageInputLayoutDateTimeRange } from '../../interfaces';
+
+export const PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_TIME_RANGE: PrizmLanguageInputLayoutDateTimeRange = {
+ inputLayoutDateTimeRange: {
+ time: 'Время',
+ },
+};

libs/i18n/src/lib/languages/russian/russian.ts

@@ -8,6 +8,7 @@ import { PRIZM_RUSSIAN_COLUMN_SETTINGS } from './column-settings';
 import { PRIZM_RUSSIAN_PAGINATOR } from './paginator';
 import { PRIZM_RUSSIAN_INPUT } from './input';
 import { PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_TIME } from './input-layout-date-time';
+import { PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_TIME_RANGE } from './input-layout-date-time-range';
 
 export const PRIZM_RUSSIAN_LANGUAGE = {
  name: `russian`,
@@ -18,6 +19,7 @@ export const PRIZM_RUSSIAN_LANGUAGE = {
  ...PRIZM_RUSSIAN_INPUT,
  ...PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_RELATIVE,
  ...PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_TIME,
+ ...PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_TIME_RANGE,
  ...PRIZM_RUSSIAN_CRON,
  ...PRIZM_RUSSIAN_COLUMN_SETTINGS,
  ...PRIZM_RUSSIAN_PAGINATOR,