feat(pickers): Add localization resources,,

Expose public resourceStrings for date and range pickers.

Add/Use localization strings for date, range and time pickers

Author: iganchev

projects/igniteui-angular/src/lib/core/i18n/date-picker-resources.ts

@@ -0,0 +1,9 @@
+export interface IDatePickerResourceStrings {
+    igx_date_picker_change_date?: string;
+    igx_date_picker_choose_date?: string;
+}
+
+export const DatePickerResourceStringsEN: IDatePickerResourceStrings = {
+    igx_date_picker_change_date: 'Change Date',
+    igx_date_picker_choose_date: 'Choose Date'
+};

projects/igniteui-angular/src/lib/core/i18n/date-range-picker-resources.ts

@@ -1,7 +1,9 @@
 export interface IDateRangePickerResourceStrings {
     igx_date_range_picker_date_separator?: string;
+    igx_date_range_picker_done_button?: string;
 }
 
 export const DateRangePickerResourceStringsEN: IDateRangePickerResourceStrings = {
-    igx_date_range_picker_date_separator: 'to'
+    igx_date_range_picker_date_separator: 'to',
+    igx_date_range_picker_done_button: 'Done'
 };

projects/igniteui-angular/src/lib/core/i18n/resources.ts

@@ -1,3 +1,4 @@
+import { DatePickerResourceStringsEN, IDatePickerResourceStrings } from './date-picker-resources';
 import { DateRangePickerResourceStringsEN, IDateRangePickerResourceStrings } from './date-range-picker-resources';
 import { IGridResourceStrings, GridResourceStringsEN } from './grid-resources';
 import { ITimePickerResourceStrings, TimePickerResourceStringsEN } from './time-picker-resources';
@@ -11,8 +12,8 @@ import { IInputResourceStrings, InputResourceStringsEN } from './input-resources
 import { ITreeResourceStrings, TreeResourceStringsEN } from './tree-resources';
 
 export interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings, ICalendarResourceStrings,
-    ICarouselResourceStrings, IChipResourceStrings, IInputResourceStrings, IDateRangePickerResourceStrings, IListResourceStrings,
-    IPaginatorResourceStrings, ITreeResourceStrings { }
+    ICarouselResourceStrings, IChipResourceStrings, IInputResourceStrings, IDatePickerResourceStrings, IDateRangePickerResourceStrings,
+    IListResourceStrings, IPaginatorResourceStrings, ITreeResourceStrings { }
 
 /**
  * @hidden
@@ -23,6 +24,7 @@ export const CurrentResourceStrings = {
     TimePickerResStrings: cloneValue(TimePickerResourceStringsEN),
     CalendarResStrings: cloneValue(CalendarResourceStringsEN),
     ChipResStrings: cloneValue(ChipResourceStringsEN),
+    DatePickerResourceStrings: cloneValue(DatePickerResourceStringsEN),
     DateRangePickerResStrings: cloneValue(DateRangePickerResourceStringsEN),
     CarouselResStrings: cloneValue(CarouselResourceStringsEN),
     ListResStrings: cloneValue(ListResourceStringsEN),
@@ -56,6 +58,7 @@ export const getCurrentResourceStrings = (): IResourceStrings => ({
     ...CurrentResourceStrings.CalendarResStrings,
     ...CurrentResourceStrings.CarouselResStrings,
     ...CurrentResourceStrings.ChipResStrings,
+    ...CurrentResourceStrings.DatePickerResourceStrings,
     ...CurrentResourceStrings.DateRangePickerResStrings,
     ...CurrentResourceStrings.GridResStrings,
     ...CurrentResourceStrings.InputResStrings,

projects/igniteui-angular/src/lib/core/i18n/time-picker-resources.ts

@@ -1,9 +1,13 @@
 export interface ITimePickerResourceStrings {
     igx_time_picker_ok?: string;
     igx_time_picker_cancel?: string;
+    igx_time_picker_change_time?: string;
+    igx_time_picker_choose_time?: string;
 }
 
 export const TimePickerResourceStringsEN: ITimePickerResourceStrings = {
     igx_time_picker_ok: 'OK',
-    igx_time_picker_cancel: 'Cancel'
+    igx_time_picker_cancel: 'Cancel',
+    igx_time_picker_change_time: 'Change Time',
+    igx_time_picker_choose_time: 'Choose Time'
 };

projects/igniteui-angular/src/lib/date-picker/date-picker.component.html

@@ -1,6 +1,6 @@
 <igx-input-group [displayDensity]="this.displayDensity" [type]="this.type" [suppressInputAutofocus]="true">
     <igx-prefix *ngIf="!this.toggleComponents.length" (click)="this.toggle()">
-        <igx-icon [title]="this.value ? 'Change Date' : 'Choose Date'">today</igx-icon>
+        <igx-icon [title]="this.value ? resourceStrings.igx_date_picker_change_date : resourceStrings.igx_date_picker_choose_date">today</igx-icon>
     </igx-prefix>
 
     <input class="igx-date-picker__input-date" [displayValuePipe]="this.formatter ? displayValue : null" igxInput

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -25,6 +25,8 @@ import {
     OverlayCancelableEventArgs,
     OverlayEventArgs
 } from '../services/public_api';
+import { CurrentResourceStrings } from '../core/i18n/resources';
+import { IDatePickerResourceStrings } from '../core/i18n/date-picker-resources';
 import { DateRangeDescriptor, DateRangeType } from '../core/dates/dateRange';
 import { isEqual, IBaseCancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from '../core/utils';
 import { IgxCalendarContainerComponent } from '../date-common/calendar-container/calendar-container.component';
@@ -354,6 +356,22 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         return this._maxValue;
     }
 
+    /**
+     * An accessor that sets the resource strings.
+     * By default it uses EN resources.
+     */
+    @Input()
+    public set resourceStrings(value: IDatePickerResourceStrings) {
+        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+    }
+
+    /**
+     * An accessor that returns the resource strings.
+     */
+    public get resourceStrings(): IDatePickerResourceStrings {
+        return this._resourceStrings;
+    }
+
     /** @hidden @internal */
     @Input()
     public readOnly = false;
@@ -435,6 +453,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     /** @hidden @internal */
     public displayValue: PipeTransform = { transform: (date: Date) => this.formatter(date) };
 
+    private _resourceStrings = CurrentResourceStrings.DatePickerResourceStrings;
     private _dateValue: Date;
     private _overlayId: string;
     private _value: Date | string;

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts

@@ -16,6 +16,7 @@ import { CalendarSelection, IgxCalendarComponent, WEEKDAYS } from '../calendar/p
 import { DateRangeType } from '../core/dates';
 import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 import { CurrentResourceStrings } from '../core/i18n/resources';
+import { IDateRangePickerResourceStrings } from '../core/i18n/date-range-picker-resources';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
 import { IBaseCancelableBrowserEventArgs, isDate, parseDate, PlatformUtil } from '../core/utils';
 import { IgxCalendarContainerComponent } from '../date-common/calendar-container/calendar-container.component';
@@ -152,6 +153,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
      *
      * @remarks
      * Default value is `Done`.
+     * An @Input property that renders Done button with custom text. By default `doneButtonText` is set to Done.
      * The button will only show up in `dialog` mode.
      *
      * @example
@@ -160,8 +162,16 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
      * ```
      */
     @Input()
-    public doneButtonText = 'Done';
+    public set doneButtonText(value: string) {
+        this._doneButtonText = value;
+    }
 
+    public get doneButtonText(): string {
+        if (this._doneButtonText === null) {
+            return this.resourceStrings.igx_date_range_picker_done_button;
+        }
+        return this._doneButtonText;
+    }
     /**
      * Custom overlay settings that should be used to display the calendar.
      *
@@ -234,6 +244,22 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         return this._maxValue;
     }
 
+    /**
+     * An accessor that sets the resource strings.
+     * By default it uses EN resources.
+     */
+     @Input()
+     public set resourceStrings(value: IDateRangePickerResourceStrings) {
+         this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+     }
+
+     /**
+      * An accessor that returns the resource strings.
+      */
+     public get resourceStrings(): IDateRangePickerResourceStrings {
+         return this._resourceStrings;
+     }
+
     /**
      * Sets the `placeholder` for single-input `IgxDateRangePickerComponent`.
      *
@@ -303,7 +329,12 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     public dateSeparatorTemplate: TemplateRef<any>;
 
     /** @hidden @internal */
-    public dateSeparator = CurrentResourceStrings.DateRangePickerResStrings.igx_date_range_picker_date_separator;
+    public get dateSeparator(): string {
+        if (this._dateSeparator === null) {
+            return this.resourceStrings.igx_date_range_picker_date_separator;
+        }
+        return this._dateSeparator;
+    }
 
     /** @hidden @internal */
     public get appliedFormat(): string {
@@ -386,6 +417,9 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         return false;
     }
 
+    private _resourceStrings = CurrentResourceStrings.DateRangePickerResStrings;
+    private _doneButtonText = null;
+    private _dateSeparator = null;
     private _value: DateRange | null;
     private _overlayId: string;
     private _ngControl: NgControl;

projects/igniteui-angular/src/lib/time-picker/time-picker.component.html

@@ -8,7 +8,7 @@
         [attr.aria-expanded]="!this.toggleDirective.collapsed" [attr.aria-labelledby]="this.label?.id" />
 
     <igx-prefix *ngIf="!this.toggleComponents.length" (click)="this.toggle()">
-        <igx-icon>access_time</igx-icon>
+        <igx-icon [title]="this.value ? resourceStrings.igx_time_picker_change_time : resourceStrings.igx_time_picker_choose_time">access_time</igx-icon>
     </igx-prefix>
 
     <ng-container ngProjectAs="[igxLabel]">
@@ -87,4 +87,4 @@ <h2 class="igx-time-picker__header-hour">
             *ngTemplateOutlet="timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions">
         </ng-container>
     </div>
-</div>
+</div>

projects/igniteui-angular/src/public_api.ts

@@ -118,6 +118,7 @@ export { IGridResourceStrings } from './lib/core/i18n/grid-resources';
 export { IPaginatorResourceStrings } from './lib/core/i18n/paginator-resources';
 export { ICalendarResourceStrings } from './lib/core/i18n/calendar-resources';
 export { ITimePickerResourceStrings } from './lib/core/i18n/time-picker-resources';
+export { IDatePickerResourceStrings } from './lib/core/i18n/date-picker-resources';
 export { IDateRangePickerResourceStrings } from './lib/core/i18n/date-range-picker-resources';
 export { IListResourceStrings } from './lib/core/i18n/list-resources';
 export { PickerInteractionMode } from './lib/date-common/types';