From 1f30ab394662f0f0fa32d598196dad0e6120b4cc Mon Sep 17 00:00:00 2001 From: Aliaksandr Shumeika Date: Tue, 20 Apr 2021 16:59:59 +0300 Subject: [PATCH] fix(timepicker): add localization provider for timepicker --- .../datepicker/date-timepicker.component.ts | 4 +++- .../datepicker/datepicker.component.ts | 9 +++++++-- .../theme/components/timepicker/model.ts | 16 ++++++++++++++++ .../timepicker/timepicker.component.ts | 19 ++++++++++++------- 4 files changed, 38 insertions(+), 10 deletions(-) diff --git a/src/framework/theme/components/datepicker/date-timepicker.component.ts b/src/framework/theme/components/datepicker/date-timepicker.component.ts index 12077f5399..7f5af0ec9a 100644 --- a/src/framework/theme/components/datepicker/date-timepicker.component.ts +++ b/src/framework/theme/components/datepicker/date-timepicker.component.ts @@ -3,6 +3,7 @@ import { Component, ComponentFactoryResolver, Inject, + Injector, Input, OnInit, Optional, @@ -88,10 +89,11 @@ export class NbDateTimePickerComponent extends NbBasePickerComponent, @Optional() @Inject(NB_DATE_SERVICE_OPTIONS) dateServiceOptions, protected calendarWithTimeModelService: NbCalendarTimeModelService) { - super(document, positionBuilder, triggerStrategyBuilder, overlay, cfr, dateService, dateServiceOptions); + super(document, positionBuilder, triggerStrategyBuilder, overlay, cfr, injector, dateService, dateServiceOptions); } ngOnInit() { diff --git a/src/framework/theme/components/datepicker/datepicker.component.ts b/src/framework/theme/components/datepicker/datepicker.component.ts index 7490c563e0..8b26b014ca 100644 --- a/src/framework/theme/components/datepicker/datepicker.component.ts +++ b/src/framework/theme/components/datepicker/datepicker.component.ts @@ -20,6 +20,7 @@ import { OnInit, SimpleChanges, Optional, + Injector, } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { Observable, ReplaySubject, Subject } from 'rxjs'; @@ -193,6 +194,7 @@ export abstract class NbBasePicker extends NbDatepicker { protected positionBuilder: NbPositionBuilderService, protected triggerStrategyBuilder: NbTriggerStrategyBuilderService, protected cfr: ComponentFactoryResolver, + protected injector: Injector, protected dateService: NbDateService, protected dateServiceOptions, ) { @@ -281,7 +283,9 @@ export abstract class NbBasePicker extends NbDatepicker { } protected openDatepicker() { - this.container = this.ref.attach(new NbComponentPortal(NbDatepickerContainerComponent, null, null, this.cfr)); + this.container = this.ref.attach( + new NbComponentPortal(NbDatepickerContainerComponent, null, this.injector, this.cfr), + ); this.instantiatePicker(); this.subscribeOnValueChange(); this.writeQueue(); @@ -471,10 +475,11 @@ export class NbBasePickerComponent extends NbBasePicker triggerStrategyBuilder: NbTriggerStrategyBuilderService, overlay: NbOverlayService, cfr: ComponentFactoryResolver, + injector: Injector, dateService: NbDateService, @Optional() @Inject(NB_DATE_SERVICE_OPTIONS) dateServiceOptions, ) { - super(overlay, positionBuilder, triggerStrategyBuilder, cfr, dateService, dateServiceOptions); + super(overlay, positionBuilder, triggerStrategyBuilder, cfr, injector, dateService, dateServiceOptions); } ngOnInit() { diff --git a/src/framework/theme/components/timepicker/model.ts b/src/framework/theme/components/timepicker/model.ts index d8a4c35f1b..3670f0bff6 100644 --- a/src/framework/theme/components/timepicker/model.ts +++ b/src/framework/theme/components/timepicker/model.ts @@ -8,6 +8,15 @@ import { InjectionToken } from '@angular/core'; export const NB_TIME_PICKER_CONFIG = new InjectionToken('NB_TIME_PICKER_CONFIG'); +export const NB_TIME_PICKER_LOCALIZATION = new InjectionToken('NB_TIME_PICKER_LOCALIZATION', { + providedIn: 'root', + factory: () => { + return { + hoursText: 'Hr', minutesText: 'Min', secondsText: 'Sec', ampmText: 'Am/Pm', + } + }, +}); + export interface NbTimePickerConfig { twelveHoursFormat?: boolean, format?: string, @@ -21,3 +30,10 @@ export interface NbSelectedTimePayload { time: D, save?: boolean, } + +export interface NbTimepickerLocalization { + hoursText: string, + minutesText: string, + secondsText: string, + ampmText: string, +} diff --git a/src/framework/theme/components/timepicker/timepicker.component.ts b/src/framework/theme/components/timepicker/timepicker.component.ts index e560ab261e..03966c378f 100644 --- a/src/framework/theme/components/timepicker/timepicker.component.ts +++ b/src/framework/theme/components/timepicker/timepicker.component.ts @@ -6,7 +6,6 @@ import { EventEmitter, Inject, Input, - LOCALE_ID, OnChanges, OnInit, Output, @@ -21,7 +20,13 @@ 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_TIME_PICKER_CONFIG, + NB_TIME_PICKER_LOCALIZATION, + NbSelectedTimePayload, + NbTimePickerConfig, + NbTimepickerLocalization, +} from './model'; interface NbTimePartOption { value: number, @@ -146,10 +151,10 @@ export class NbTimePickerComponent 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 = this.tokens.hoursText; + @Input() minutesText = this.tokens.minutesText; + @Input() secondsText = this.tokens.secondsText; + @Input() ampmText = this.tokens.ampmText; @Input() currentTimeButtonText: string; /** @@ -159,8 +164,8 @@ export class NbTimePickerComponent implements OnChanges, OnInit { @ViewChild(NbPortalDirective, {static: true}) portal: NbPortalDirective; constructor(@Inject(NB_TIME_PICKER_CONFIG) protected config: NbTimePickerConfig, + @Inject(NB_TIME_PICKER_LOCALIZATION) protected tokens: NbTimepickerLocalization, protected platformService: NbPlatform, - @Inject(LOCALE_ID) locale: string, public cd: ChangeDetectorRef, protected calendarTimeModelService: NbCalendarTimeModelService, protected dateService: NbDateService) {