feat(calendar): make weekStart default value to depend on current locale

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';
@@ -8,6 +8,7 @@ import { IgxCalendarView } from './month-picker-base';
 import { CurrentResourceStrings } from '../core/i18n/resources';
 import { ICalendarResourceStrings } from '../core/i18n/calendar-resources';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
+import { getLocaleFirstDayOfWeek } from "@angular/common";
 
 
 /**
@@ -162,7 +163,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     /**
      * @hidden
      */
-    private _locale = 'en';
+    private _locale;
 
     /**
      * @hidden
@@ -239,25 +240,39 @@ 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;
     }
 
     /**
      * Gets the `locale` of the calendar.
-     * Default value is `"en"`.
+     * Default value is `application's LOCALE_ID`.
      */
     @Input()
     public get locale(): string {
         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;
+        try {
+            getLocaleFirstDayOfWeek(this._locale);
+        } catch (e) {
+            this._locale = this._localeId;
+        }
+
+        if (this._weekStart === undefined) {
+            this.calendarModel.firstWeekDay = getLocaleFirstDayOfWeek(this._locale);
+        }
+
         this.initFormatters();
     }
 
@@ -436,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.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, LOCALE_ID, ViewChild } from '@angular/core';
 import { TestBed, tick, fakeAsync, flush, waitForAsync } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -347,7 +347,7 @@ describe('IgxCalendar - ', () => {
                 expect(headerDate.nativeElement.textContent.trim()).toMatch('1 sept.');
                 expect(bodyYear.nativeElement.textContent.trim()).toMatch('18');
                 expect(bodyMonth.nativeElement.textContent.trim()).toMatch('sept.');
-                expect(bodyWeekday.nativeElement.textContent.trim()).toMatch('Dim.');
+                expect(bodyWeekday.nativeElement.textContent.trim()).toMatch('Lun.');
             });
 
             it('Should default to today date when invalid date is passed', () => {
@@ -1964,6 +1964,7 @@ describe('IgxCalendar - ', () => {
             let fixture; let dom; let calendar; let prevMonthBtn; let nextMonthBtn;
 
             beforeEach(waitForAsync(() => {
+                TestBed.overrideProvider(LOCALE_ID, {useValue: 'fr'});
                 fixture = TestBed.createComponent(IgxCalendarSampleComponent);
                 fixture.detectChanges();
                 dom = fixture.debugElement;
@@ -2007,6 +2008,77 @@ describe('IgxCalendar - ', () => {
                 fixture.detectChanges();
                 expect(calendar.viewDate.getMonth()).toEqual(5);
             }));
+
+            it('Should the weekStart property takes precedence over locale.', fakeAsync(() => {
+                calendar.locale = 'en';
+                fixture.detectChanges();
+
+                expect(calendar.weekStart).toEqual(0);
+
+                calendar.weekStart = WEEKDAYS.FRIDAY;
+                expect(calendar.weekStart).toEqual(5);
+
+                calendar.locale = 'fr';
+                fixture.detectChanges();
+
+                expect(calendar.weekStart).toEqual(5);
+
+                flush();
+            }));
+
+            it('Should passing invalid value for locale, then setting weekStart must be respected.', fakeAsync(() => {
+                const locale = 'en-US';
+                calendar.locale = locale;
+                fixture.detectChanges();
+
+                expect(calendar.locale).toEqual(locale);
+                expect(calendar.weekStart).toEqual(WEEKDAYS.SUNDAY)
+
+                calendar.locale = 'frrr';
+                calendar.weekStart = WEEKDAYS.FRIDAY;
+                fixture.detectChanges();
+
+                expect(calendar.locale).toEqual('fr');
+                expect(calendar.weekStart).toEqual(WEEKDAYS.FRIDAY);
+
+                flush();
+            }));
+
+            it('Should setting the global LOCALE_ID, Calendar must be displayed per current locale.', fakeAsync(() => {
+                // Verify locale is set respecting the globally LOCALE_ID provider
+                expect(calendar.locale).toEqual('fr');
+
+                // Verify Calendar is displayed per FR locale
+                fixture.componentInstance.viewDate = new Date(2022, 5, 23);
+                fixture.componentInstance.model = new Date();
+                fixture.detectChanges();
+
+                const defaultOptions = {
+                    day: 'numeric',
+                    month: 'short',
+                    weekday: 'short',
+                    year: 'numeric'
+                };
+                const defaultViews = { day: false, month: true, year: false };
+                const bodyMonth = dom.query(By.css(HelperTestFunctions.CALENDAR_DATE_CSSCLASS));
+                const headerYear = dom.query(By.css(HelperTestFunctions.CALENDAR_HEADER_YEAR_CSSCLASS));
+                const bodyYear = dom.queryAll(By.css(HelperTestFunctions.CALENDAR_DATE_CSSCLASS))[1];
+                const headerWeekday = dom.queryAll(By.css(`${HelperTestFunctions.CALENDAR_HEADER_DATE_CSSCLASS} span`))[0];
+                const headerDate = dom.queryAll(By.css(`${HelperTestFunctions.CALENDAR_HEADER_DATE_CSSCLASS} span`))[1];
+
+                calendar.selectDate(calendar.viewDate);
+                fixture.detectChanges();
+
+                expect(calendar.formatOptions).toEqual(jasmine.objectContaining(defaultOptions));
+                expect(calendar.formatViews).toEqual(jasmine.objectContaining(defaultViews));
+                expect(headerYear.nativeElement.textContent.trim()).toMatch('2022');
+                expect(headerWeekday.nativeElement.textContent.trim()).toMatch('mer');
+                expect(headerDate.nativeElement.textContent.trim()).toMatch('1 juin');
+                expect(bodyYear.nativeElement.textContent.trim()).toMatch('2022');
+                expect(bodyMonth.nativeElement.textContent.trim()).toMatch('juin');
+
+                flush();
+            }));
         });
     });
 });

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.spec.ts

@@ -1,4 +1,4 @@
-import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, flush, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { FormControl, FormGroup, FormsModule, NgForm, ReactiveFormsModule, Validators } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UIInteractions } from '../test-utils/ui-interactions.spec';
@@ -8,7 +8,7 @@ import {
 import { IgxTextSelectionModule } from '../directives/text-selection/text-selection.directive';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { IgxButtonModule } from '../directives/button/button.directive';
-import { IFormattingViews, IgxCalendarComponent, IgxCalendarModule } from '../calendar/public_api';
+import { IFormattingViews, IgxCalendarComponent, IgxCalendarModule, WEEKDAYS } from '../calendar/public_api';
 import { IgxIconModule } from '../icon/public_api';
 import { IgxCalendarContainerComponent, IgxCalendarContainerModule } from '../date-common/calendar-container/calendar-container.component';
 import { IgxDatePickerComponent } from './date-picker.component';
@@ -26,6 +26,8 @@ import { DateRangeDescriptor, DateRangeType } from '../core/dates';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
 import { IgxPickerClearComponent, IgxPickerToggleComponent } from '../date-common/public_api';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
+import { registerLocaleData } from "@angular/common";
+import localeES from "@angular/common/locales/es";
 
 const CSS_CLASS_CALENDAR = 'igx-calendar';
 const CSS_CLASS_DATE_PICKER = 'igx-date-picker';
@@ -291,6 +293,47 @@ describe('IgxDatePicker', () => {
                 expect(inputGroupRequiredClass).not.toBeNull();
                 expect(asterisk).toBe('"*"');
             });
+
+            it('Should the weekStart property takes precedence over locale.', fakeAsync(() => {
+                fixture = TestBed.createComponent(IgxDatePickerReactiveFormComponent);
+                fixture.detectChanges();
+                datePicker = fixture.componentInstance.datePicker;
+
+                datePicker.locale = 'en';
+                fixture.detectChanges();
+
+                expect(datePicker.weekStart).toEqual(0);
+
+                datePicker.weekStart = WEEKDAYS.FRIDAY;
+                expect(datePicker.weekStart).toEqual(5);
+
+                datePicker.locale = 'fr';
+                fixture.detectChanges();
+
+                expect(datePicker.weekStart).toEqual(5);
+
+                flush();
+            }));
+
+            it('Should passing invalid value for locale, then setting weekStart must be respected.', fakeAsync(() => {
+                fixture = TestBed.createComponent(IgxDatePickerReactiveFormComponent);
+                fixture.detectChanges();
+                datePicker = fixture.componentInstance.datePicker;
+
+                const locale = 'en-US';
+                datePicker.locale = locale;
+                fixture.detectChanges();
+
+                expect(datePicker.locale).toEqual(locale);
+                expect(datePicker.weekStart).toEqual(WEEKDAYS.SUNDAY)
+
+                datePicker.locale = 'frrr';
+                datePicker.weekStart = WEEKDAYS.FRIDAY;
+                fixture.detectChanges();
+
+                expect(datePicker.locale).toEqual('en-US');
+                expect(datePicker.weekStart).toEqual(WEEKDAYS.FRIDAY);
+            }));
         });
 
         describe('Projected elements', () => {
@@ -568,7 +611,7 @@ describe('IgxDatePicker', () => {
                 },
                 focus: () => { }
             };
-            datePicker = new IgxDatePickerComponent(elementRef, null, overlay, mockModuleRef, mockInjector, renderer2, null, mockCdr);
+            datePicker = new IgxDatePickerComponent(elementRef, 'en-US', overlay, mockModuleRef, mockInjector, renderer2, null, mockCdr);
             (datePicker as any).inputGroup = mockInputGroup;
             (datePicker as any).inputDirective = mockInputDirective;
             (datePicker as any).dateTimeEditor = mockDateEditor;
@@ -582,6 +625,7 @@ describe('IgxDatePicker', () => {
             UIInteractions.clearOverlay();
         });
         describe('API tests', () => {
+            registerLocaleData(localeES);
             it('Should initialize and update all inputs properly', () => {
                 // no ngControl initialized
                 expect(datePicker.required).toEqual(false);
@@ -608,7 +652,7 @@ describe('IgxDatePicker', () => {
                 expect(datePicker.spinLoop).toEqual(true);
                 expect(datePicker.tabIndex).toEqual(undefined);
                 expect(datePicker.overlaySettings).toEqual(undefined);
-                expect(datePicker.locale).toEqual(null);
+                expect(datePicker.locale).toEqual('en-US');
                 expect(datePicker.placeholder).toEqual('');
                 expect(datePicker.readOnly).toEqual(false);
                 expect(datePicker.value).toEqual(undefined);

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

@@ -38,6 +38,7 @@ import { DateTimeUtil } from '../date-common/util/date-time.util';
 import { PickerHeaderOrientation as PickerHeaderOrientation } from '../date-common/types';
 import { IDatePickerValidationFailedEventArgs } from './date-picker.common';
 import { IgxPickerClearComponent, IgxPickerActionsDirective } from '../date-common/public_api';
+import { getLocaleFirstDayOfWeek } from "@angular/common";
 
 let NEXT_ID = 0;
 
@@ -73,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.
@@ -724,6 +725,15 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     /** @hidden @internal */
     public ngOnInit(): void {
         this._ngControl = this._injector.get<NgControl>(NgControl, null);
+
+        this.locale = this.locale || this._localeId;
+        if (this.weekStart == null) {
+            try {
+                this.weekStart = getLocaleFirstDayOfWeek(this.locale);
+            } catch (e) {
+                this.weekStart = getLocaleFirstDayOfWeek(this._localeId);
+            }
+        }
     }
 
     /** @hidden @internal */