Merge pull request #11812 from IgniteUI/VDyulgerov/feature-locale-14.0

V dyulgerov/feature locale 14.0

CHANGELOG.md

@@ -4,13 +4,23 @@ All notable changes for each version of this project will be documented in this
 
 ## 14.0.0
 
+- `IgxDatePicker` and `IgxDateRangePicker` now expose a `weekStart` input property like the `IgxCalendar`
+
+### New Features
+
 ### General
 - Updating dependency to Angular 14
 - `Migrations`
     - Migrations now support Yarn berry (version 2+)
 
 - `IgxGridEditingActions`
     - Added new inputs to show/hide the edit and delete buttons - `editRow`, `deleteRow`.
+    - 
+- - Locale settings
+    - `IgxDatePicker` and `IgxDateRangePicker` now expose a `weekStart` input property like the `IgxCalendar`
+    - `IColumnPipeArgs` interface now expose a `weekStart` property to control the first week of day in calendar used in the grid for editing and filtering
+    - `locale` property of `IgxCalendar`, `IgxDatePicker`, `IgxDateRangePicker` and `IgxGrid` will now default to global Angular application locale, if not set.
+    - `weekStart` property of `IgxCalendar`, `IgxDatePicker`, `IgxDateRangePicker` and `IgxGrid` will default to the default first day for the current component `locale`, if not set.
 
 ## 13.2.0
 

projects/igniteui-angular/src/lib/calendar/README.md

@@ -114,9 +114,9 @@ Controls the layout of the calendar component. When vertical is set to `true`
 the calendar header will be rendered to the side of the calendar body.
 Defaults to `false`.
 
-- `weekStart: number | WEEKDAYS`
+- `weekStart: WEEKDAYS | number`
 
-Controls the starting day of the weeek for the calendar.
+Controls the starting day of the week for the calendar.
 Defaults to Sunday.
 
 - `locale: string`

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,7 +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, getLocaleId } from "@angular/common";
 
 /**
  * Sets the selection type - single, multi or range.
@@ -162,7 +162,12 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     /**
      * @hidden
      */
-    private _locale = 'en';
+    private _locale: string;
+
+    /**
+     * @hidden
+     */
+    private _weekStart: WEEKDAYS | number;
 
     /**
      * @hidden
@@ -227,7 +232,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     /**
      * Gets the start day of the week.
      * Can return a numeric or an enum representation of the week day.
-     * Defaults to `Sunday` / `0`.
+     * If not set, defaults to the first day of the week for the application locale.
      */
     @Input()
     public get weekStart(): WEEKDAYS | number {
@@ -239,12 +244,13 @@ 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"`.
+     * If not set, defaults to application's locale.
      */
     @Input()
     public get locale(): string {
@@ -258,6 +264,19 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      */
     public set locale(value: string) {
         this._locale = value;
+
+        // if value is not a valid BCP 47 tag, set it back to _localeId
+        try {
+            getLocaleFirstDayOfWeek(this._locale);
+        } catch (e) {
+            this._locale = this._localeId;
+        }
+
+        // changing locale runtime needs to update the `weekStart` too, if `weekStart` is not explicitly set
+        if (this._weekStart === undefined) {
+            this.calendarModel.firstWeekDay = getLocaleFirstDayOfWeek(this._locale);
+        }
+
         this.initFormatters();
     }
 
@@ -436,12 +455,11 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     /**
      * @hidden
      */
-    constructor(protected platform: PlatformUtil) {
+    constructor(protected platform: PlatformUtil, @Inject(LOCALE_ID) protected _localeId: string) {
         this.calendarModel = new Calendar();
-
+        this.locale = _localeId;
         this.viewDate = this.viewDate ? this.viewDate : new Date();
 
-        this.calendarModel.firstWeekDay = this.weekStart;
         this.initFormatters();
     }
 

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,76 @@ 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

@@ -155,9 +155,9 @@ export enum WEEKDAYS {
 
 export class Calendar {
 
-    private _firstWeekDay: number | WEEKDAYS;
+    private _firstWeekDay: WEEKDAYS | number;
 
-    constructor(firstWeekDay: number | WEEKDAYS = WEEKDAYS.SUNDAY) {
+    constructor(firstWeekDay: WEEKDAYS = WEEKDAYS.SUNDAY) {
         this._firstWeekDay = firstWeekDay;
     }
 

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,14 @@ 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";
+import { WEEKDAYS } from '../calendar/calendar';
 
 @Directive()
 export abstract class PickerBaseDirective extends DisplayDensityBase implements IToggleView, EditorProvider, AfterViewInit, OnDestroy {
+    protected _locale;
+    protected _weekStart: WEEKDAYS | number;
+
     /**
      * The editor's input mask.
      *
@@ -95,21 +100,51 @@ export abstract class PickerBaseDirective extends DisplayDensityBase implements
     public disabled = false;
 
     /**
-     * Locale settings used for value formatting and calendar or time spinner.
-     *
-     * @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-picker locale="jp"></igx-date-picker>
      * ```
      */
+    /**
+     * Gets the `locale` of the date-picker.
+     * If not set, defaults to applciation's locale..
+     */
+    @Input()
+    public get locale(): string {
+        return this._locale;
+    }
+
+    /**
+     * Sets the `locale` of the date-picker.
+     * Expects a valid BCP 47 language tag.
+     */
+    public set locale(value: string) {
+        this._locale = value;
+        // if value is invalid, set it back to _localeId
+        try {
+            getLocaleFirstDayOfWeek(this._locale);
+        } catch (e) {
+            this._locale = this._localeId;
+        }
+    }
+
+    /**
+     * Gets the start day of the week.
+     * Can return a numeric or an enum representation of the week day.
+     * If not set, defaults to the first day of the week for the application locale.
+     */
     @Input()
-    public locale: string;
+    public get weekStart(): WEEKDAYS | number {
+        return this._weekStart ?? getLocaleFirstDayOfWeek(this._locale);
+    }
+
+    /**
+     * Sets the start day of the week.
+     * Can be assigned to a numeric value or to `WEEKDAYS` enum value.
+     */
+    public set weekStart(value: WEEKDAYS | number) {
+        this._weekStart = value;
+    }
 
     /**
      * The container used for the pop-up element.