chore(*): resolving review comments

Author: Volen99

projects/igniteui-angular/src/lib/calendar/calendar-base.ts

@@ -1,4 +1,4 @@
-import { Input, Output, EventEmitter, Directive } from '@angular/core';
+import { Input, Output, EventEmitter, Directive, Inject, LOCALE_ID } from '@angular/core';
 import { WEEKDAYS, Calendar, isDateInRanges, IFormattingOptions, IFormattingViews } from './calendar';
 import { ControlValueAccessor } from '@angular/forms';
 import { DateRangeDescriptor } from '../core/dates';
@@ -163,7 +163,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     /**
      * @hidden
      */
-    private _locale = 'en';
+    private _locale;
 
     /**
      * @hidden
@@ -240,6 +240,8 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      * Can be assigned to a numeric value or to `WEEKDAYS` enum value.
      */
     public set weekStart(value: WEEKDAYS | number) {
+        this._weekStart = value;
+
         this.calendarModel.firstWeekDay = value;
     }
 
@@ -252,16 +254,25 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
         return this._locale;
     }
 
+    private _weekStart: number | WEEKDAYS;
+
     /**
      * Sets the `locale` of the calendar.
      * Expects a valid BCP 47 language tag.
      * Default value is `"en"`.
      */
     public set locale(value: string) {
         this._locale = value;
-        if (!this.weekStart) {
+        try {
+            getLocaleFirstDayOfWeek(this._locale);
+        } catch (e) {
+            this._locale = this._localeId;
+        }
+
+        if (this._weekStart === undefined) {
             this.calendarModel.firstWeekDay = getLocaleFirstDayOfWeek(this._locale);
         }
+
         this.initFormatters();
     }
 
@@ -440,8 +451,9 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     /**
      * @hidden
      */
-    constructor(protected platform: PlatformUtil) {
+    constructor(protected platform: PlatformUtil, @Inject(LOCALE_ID) protected _localeId: any) {
         this.calendarModel = new Calendar();
+        this.locale = _localeId;
 
         this.viewDate = this.viewDate ? this.viewDate : new Date();
 

projects/igniteui-angular/src/lib/calendar/calendar.ts

@@ -157,12 +157,16 @@ export class Calendar {
 
     private _firstWeekDay: number | WEEKDAYS;
 
-    constructor(firstWeekDay: number | WEEKDAYS = WEEKDAYS.SUNDAY) {
+    constructor(firstWeekDay: number | WEEKDAYS = undefined) {
         this._firstWeekDay = firstWeekDay;
     }
 
     public get firstWeekDay(): number {
-        return this._firstWeekDay % 7;
+        if (this._firstWeekDay !== undefined) {
+            return this._firstWeekDay % 7;
+        }
+
+        return this._firstWeekDay;
     }
 
     public set firstWeekDay(value: number) {

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts

@@ -8,7 +8,8 @@ import {
     QueryList,
     HostBinding,
     DoCheck,
-    OnInit
+    OnInit,
+    Inject, LOCALE_ID
 } from '@angular/core';
 import { ICalendarDate, isDateInRanges } from '../../calendar/calendar';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -138,9 +139,9 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
      */
     constructor(
         public daysNavService: IgxDaysViewNavigationService,
-        protected platform: PlatformUtil
+        protected platform: PlatformUtil, @Inject(LOCALE_ID) protected _localeId: any
     ) {
-        super(platform);
+        super(platform, _localeId);
     }
 
     /**

projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts

@@ -14,9 +14,15 @@ import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/public_a
 import { OverlaySettings } from '../services/overlay/utilities';
 import { IgxPickerToggleComponent } from './picker-icons.common';
 import { PickerInteractionMode } from './types';
+import { getLocaleFirstDayOfWeek } from "@angular/common";
 
 @Directive()
 export abstract class PickerBaseDirective extends DisplayDensityBase implements IToggleView, EditorProvider, AfterViewInit, OnDestroy {
+    /**
+     * @hidden
+     */
+    private _locale;
+
     /**
      * The editor's input mask.
      *
@@ -108,8 +114,29 @@ export abstract class PickerBaseDirective extends DisplayDensityBase implements
      * <igx-date-picker locale="jp"></igx-date-picker>
      * ```
      */
+    /**
+     * Gets the `locale` of the date-picker.
+     * Default value is `application's LOCALE_ID`.
+     */
     @Input()
-    public locale: string;
+    public get locale(): string {
+        return this._locale;
+    }
+
+
+    /**
+     * Sets the `locale` of the date-picker.
+     * Expects a valid BCP 47 language tag.
+     * Default value is `application's LOCALE_ID`.
+     */
+    public set locale(value: string) {
+        this._locale = value;
+        try {
+            getLocaleFirstDayOfWeek(this._locale);
+        } catch (e) {
+            this._locale = this._localeId;
+        }
+    }
 
     /**
      * The container used for the pop-up element.

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

@@ -74,7 +74,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
      * ```
      */
     @Input()
-    public weekStart: WEEKDAYS | number = WEEKDAYS.SUNDAY;
+    public weekStart: WEEKDAYS | number;
 
     /**
      * Gets/Sets whether the inactive dates will be hidden.
@@ -727,8 +727,12 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         this._ngControl = this._injector.get<NgControl>(NgControl, null);
 
         this.locale = this.locale || this._localeId;
-        if (!this.weekStart) {
-            this.weekStart = getLocaleFirstDayOfWeek(this.locale);
+        if (this.weekStart == null) {
+            try {
+                this.weekStart = getLocaleFirstDayOfWeek(this.locale);
+            } catch (e) {
+                this.weekStart = getLocaleFirstDayOfWeek(this._localeId);
+            }
         }
     }
 

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

@@ -111,24 +111,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
      * ```
      */
     @Input()
-    public weekStart: WEEKDAYS | number = WEEKDAYS.SUNDAY;
-
-    /**
-     * Locale settings used for value formatting and calendar.
-     *
-     * @remarks
-     * Uses Angular's `LOCALE_ID` by default. Affects both input mask and display format if those are not set.
-     * If a `locale` is set, it must be registered via `registerLocaleData`.
-     * Please refer to https://angular.io/guide/i18n#i18n-pipes.
-     * If it is not registered, `Intl` will be used for formatting.
-     *
-     * @example
-     * ```html
-     * <igx-date-range-picker locale="jp"></igx-date-range-picker>
-     * ```
-     */
-    @Input()
-    public locale: string;
+    public weekStart: WEEKDAYS | number;
 
     /**
      * A custom formatter function, applied on the selected or passed in date.
@@ -614,8 +597,12 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         this._ngControl = this._injector.get<NgControl>(NgControl, null);
 
         this.locale = this.locale || this._localeId;
-        if (!this.weekStart) {
-            this.weekStart = getLocaleFirstDayOfWeek(this.locale);
+        if (this.weekStart === undefined) {
+            try {
+                this.weekStart = getLocaleFirstDayOfWeek(this.locale);
+            } catch (e) {
+                this.weekStart = getLocaleFirstDayOfWeek(this._localeId);
+            }
         }
     }