From b9c77ceb978e5d68fd9a84fee21ca4ed37425abd Mon Sep 17 00:00:00 2001
From: Aliaksandr Shumeika <unumtresocto@gmail.com>
Date: Tue, 15 Jun 2021 14:39:47 +0300
Subject: [PATCH] feat(timepicker): add localization config (#2719)

---
 .../theme/components/timepicker/model.ts      | 15 ++++++++
 .../timepicker/timepicker.component.ts        | 36 +++++++++++++------
 .../timepicker/timepicker.directive.ts        | 19 ++++++++++
 3 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/src/framework/theme/components/timepicker/model.ts b/src/framework/theme/components/timepicker/model.ts
index d8a4c35f1b..66cd574b0a 100644
--- a/src/framework/theme/components/timepicker/model.ts
+++ b/src/framework/theme/components/timepicker/model.ts
@@ -8,9 +8,24 @@ import { InjectionToken } from '@angular/core';
 
 export const NB_TIME_PICKER_CONFIG = new InjectionToken('NB_TIME_PICKER_CONFIG');
 
+export interface NbTimepickerLocalizationConfig {
+  hoursText: string,
+  minutesText: string,
+  secondsText: string,
+  ampmText: string,
+}
+
+export const NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG: NbTimepickerLocalizationConfig = {
+  hoursText: 'Hr',
+  minutesText: 'Min',
+  secondsText: 'Sec',
+  ampmText: 'Am/Pm',
+};
+
 export interface NbTimePickerConfig {
   twelveHoursFormat?: boolean,
   format?: string,
+  localization?: NbTimepickerLocalizationConfig,
 }
 
 export interface NbSelectedTimeModel {
diff --git a/src/framework/theme/components/timepicker/timepicker.component.ts b/src/framework/theme/components/timepicker/timepicker.component.ts
index e560ab261e..8bcad79c32 100644
--- a/src/framework/theme/components/timepicker/timepicker.component.ts
+++ b/src/framework/theme/components/timepicker/timepicker.component.ts
@@ -21,7 +21,12 @@ import { NbPlatform } from '../cdk/platform/platform-service';
 import { NbDateService, NbDayPeriod } from '../calendar-kit/services/date.service';
 import { range, rangeFromTo } from '../calendar-kit/helpers';
 import { NbCalendarTimeModelService } from '../calendar-kit/services/calendar-time-model.service';
-import { NB_TIME_PICKER_CONFIG, NbSelectedTimePayload, NbTimePickerConfig } from './model';
+import {
+  NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG,
+  NB_TIME_PICKER_CONFIG,
+  NbSelectedTimePayload,
+  NbTimePickerConfig,
+} from './model';
 
 interface NbTimePartOption {
   value: number,
@@ -146,10 +151,10 @@ export class NbTimePickerComponent<D> implements OnChanges, OnInit {
    */
   @Input() showFooter: boolean = true;
   @Input() applyButtonText: string;
-  @Input() hoursText = 'Hr';
-  @Input() minutesText = 'Min';
-  @Input() secondsText = 'Sec';
-  @Input() ampmText = 'Am/Pm';
+  @Input() hoursText: string;
+  @Input() minutesText: string;
+  @Input() secondsText: string;
+  @Input() ampmText: string;
   @Input() currentTimeButtonText: string;
 
   /**
@@ -164,11 +169,7 @@ export class NbTimePickerComponent<D> implements OnChanges, OnInit {
               public cd: ChangeDetectorRef,
               protected calendarTimeModelService: NbCalendarTimeModelService<D>,
               protected dateService: NbDateService<D>) {
-    if (config) {
-      this.twelveHoursFormat = config.twelveHoursFormat;
-    } else {
-      this.twelveHoursFormat = dateService.getLocaleTimeFormat().includes('h');
-    }
+    this.initFromConfig(this.config);
   }
 
   ngOnInit(): void {
@@ -343,7 +344,6 @@ export class NbTimePickerComponent<D> implements OnChanges, OnInit {
     }));
   }
 
-
   protected generateMinutesOrSeconds(): NbTimePartOption[] {
     return range(60, (v: number) => {
       return {value: v, text: this.calendarTimeModelService.paddToTwoSymbols(v)};
@@ -370,4 +370,18 @@ export class NbTimePickerComponent<D> implements OnChanges, OnInit {
         : this.dateService.getTwentyFourHoursFormat()}`;
     }
   }
+
+  protected initFromConfig(config: NbTimePickerConfig) {
+    if (config) {
+      this.twelveHoursFormat = config.twelveHoursFormat;
+    } else {
+      this.twelveHoursFormat = this.dateService.getLocaleTimeFormat().includes('h');
+    }
+
+    const localeConfig = { ...NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG, ...config?.localization ?? {} };
+    this.hoursText = localeConfig.hoursText;
+    this.minutesText = localeConfig.minutesText;
+    this.secondsText = localeConfig.secondsText;
+    this.ampmText = localeConfig.ampmText;
+  }
 }
diff --git a/src/framework/theme/components/timepicker/timepicker.directive.ts b/src/framework/theme/components/timepicker/timepicker.directive.ts
index 60534d82b9..299e6a92a8 100644
--- a/src/framework/theme/components/timepicker/timepicker.directive.ts
+++ b/src/framework/theme/components/timepicker/timepicker.directive.ts
@@ -116,6 +116,25 @@ import { NB_DOCUMENT } from '../../theme.options';
  * <input [nbTimepicker]="timepicker" twelveHoursFormat>
  * <nb-timepicker #timepicke [ngModel]="date"></nb-timepicker>
  *
+ * You can provide localized versions of the timepicker text via the `localization` property of the config
+ * object passed to the `forRoot` or `forChild` methods of the `NbTimepickerModule`:
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *     // ...
+ *     NbTimepickerModule.forRoot({
+ *       localization: {
+ *         hoursText: 'Hr',
+ *         minutesText: 'Min',
+ *         secondsText: 'Sec',
+ *         ampmText: 'Am/Pm',
+ *       }
+ *     }),
+ *   ],
+ * })
+ * export class AppModule { }
+ * ```
+ *
  * @styles
  *
  * timepicker-cell-text-color: