feat(timepicker): add localization config (#2719)

akveo · Jun 15, 2021 · b9c77ce · b9c77ce
1 parent 39c610c
commit b9c77ce
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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: