From 1f30ab394662f0f0fa32d598196dad0e6120b4cc Mon Sep 17 00:00:00 2001 From: Aliaksandr Shumeika Date: Tue, 20 Apr 2021 16:59:59 +0300 Subject: [PATCH 1/3] 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) { From 456b165bd3a699d568bcca0e0250d0933734f241 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Tue, 15 Jun 2021 14:21:39 +0300 Subject: [PATCH 2/3] refactor: add locale as a property of the existing config object --- .../datepicker/date-timepicker.component.ts | 4 +-- .../datepicker/datepicker.component.ts | 9 ++--- .../theme/components/timepicker/model.ts | 29 ++++++++------- .../timepicker/timepicker.component.ts | 35 ++++++++++++------- 4 files changed, 39 insertions(+), 38 deletions(-) diff --git a/src/framework/theme/components/datepicker/date-timepicker.component.ts b/src/framework/theme/components/datepicker/date-timepicker.component.ts index 7f5af0ec9a..12077f5399 100644 --- a/src/framework/theme/components/datepicker/date-timepicker.component.ts +++ b/src/framework/theme/components/datepicker/date-timepicker.component.ts @@ -3,7 +3,6 @@ import { Component, ComponentFactoryResolver, Inject, - Injector, Input, OnInit, Optional, @@ -89,11 +88,10 @@ export class NbDateTimePickerComponent extends NbBasePickerComponent, @Optional() @Inject(NB_DATE_SERVICE_OPTIONS) dateServiceOptions, protected calendarWithTimeModelService: NbCalendarTimeModelService) { - super(document, positionBuilder, triggerStrategyBuilder, overlay, cfr, injector, dateService, dateServiceOptions); + super(document, positionBuilder, triggerStrategyBuilder, overlay, cfr, dateService, dateServiceOptions); } ngOnInit() { diff --git a/src/framework/theme/components/datepicker/datepicker.component.ts b/src/framework/theme/components/datepicker/datepicker.component.ts index 8b26b014ca..7490c563e0 100644 --- a/src/framework/theme/components/datepicker/datepicker.component.ts +++ b/src/framework/theme/components/datepicker/datepicker.component.ts @@ -20,7 +20,6 @@ import { OnInit, SimpleChanges, Optional, - Injector, } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { Observable, ReplaySubject, Subject } from 'rxjs'; @@ -194,7 +193,6 @@ export abstract class NbBasePicker extends NbDatepicker { protected positionBuilder: NbPositionBuilderService, protected triggerStrategyBuilder: NbTriggerStrategyBuilderService, protected cfr: ComponentFactoryResolver, - protected injector: Injector, protected dateService: NbDateService, protected dateServiceOptions, ) { @@ -283,9 +281,7 @@ export abstract class NbBasePicker extends NbDatepicker { } protected openDatepicker() { - this.container = this.ref.attach( - new NbComponentPortal(NbDatepickerContainerComponent, null, this.injector, this.cfr), - ); + this.container = this.ref.attach(new NbComponentPortal(NbDatepickerContainerComponent, null, null, this.cfr)); this.instantiatePicker(); this.subscribeOnValueChange(); this.writeQueue(); @@ -475,11 +471,10 @@ 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, injector, dateService, dateServiceOptions); + super(overlay, positionBuilder, triggerStrategyBuilder, cfr, dateService, dateServiceOptions); } ngOnInit() { diff --git a/src/framework/theme/components/timepicker/model.ts b/src/framework/theme/components/timepicker/model.ts index 3670f0bff6..66cd574b0a 100644 --- a/src/framework/theme/components/timepicker/model.ts +++ b/src/framework/theme/components/timepicker/model.ts @@ -8,18 +8,24 @@ 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 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 { @@ -30,10 +36,3 @@ 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 03966c378f..8bcad79c32 100644 --- a/src/framework/theme/components/timepicker/timepicker.component.ts +++ b/src/framework/theme/components/timepicker/timepicker.component.ts @@ -6,6 +6,7 @@ import { EventEmitter, Inject, Input, + LOCALE_ID, OnChanges, OnInit, Output, @@ -21,11 +22,10 @@ import { NbDateService, NbDayPeriod } from '../calendar-kit/services/date.servic import { range, rangeFromTo } from '../calendar-kit/helpers'; import { NbCalendarTimeModelService } from '../calendar-kit/services/calendar-time-model.service'; import { + NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG, NB_TIME_PICKER_CONFIG, - NB_TIME_PICKER_LOCALIZATION, NbSelectedTimePayload, NbTimePickerConfig, - NbTimepickerLocalization, } from './model'; interface NbTimePartOption { @@ -151,10 +151,10 @@ export class NbTimePickerComponent implements OnChanges, OnInit { */ @Input() showFooter: boolean = true; @Input() applyButtonText: string; - @Input() hoursText = this.tokens.hoursText; - @Input() minutesText = this.tokens.minutesText; - @Input() secondsText = this.tokens.secondsText; - @Input() ampmText = this.tokens.ampmText; + @Input() hoursText: string; + @Input() minutesText: string; + @Input() secondsText: string; + @Input() ampmText: string; @Input() currentTimeButtonText: string; /** @@ -164,16 +164,12 @@ 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) { - if (config) { - this.twelveHoursFormat = config.twelveHoursFormat; - } else { - this.twelveHoursFormat = dateService.getLocaleTimeFormat().includes('h'); - } + this.initFromConfig(this.config); } ngOnInit(): void { @@ -348,7 +344,6 @@ export class NbTimePickerComponent implements OnChanges, OnInit { })); } - protected generateMinutesOrSeconds(): NbTimePartOption[] { return range(60, (v: number) => { return {value: v, text: this.calendarTimeModelService.paddToTwoSymbols(v)}; @@ -375,4 +370,18 @@ export class NbTimePickerComponent 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; + } } From fd01cef461197539e61f78f070d4923769f0e379 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Tue, 15 Jun 2021 14:37:19 +0300 Subject: [PATCH 3/3] docs(timepicker): add note on text localization config --- .../timepicker/timepicker.directive.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) 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'; * * * + * 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: