V dyulgerov/feature week start test

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,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;
     }
 
@@ -251,13 +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;
+        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

@@ -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', () => {

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

@@ -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';
@@ -568,7 +570,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 +584,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 +611,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 */

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

@@ -139,15 +139,15 @@ describe('IgxDateRangePicker', () => {
 
             overlay = new IgxOverlayService(
                 mockFactoryResolver, mockApplicationRef, mockInjector, mockAnimationBuilder, mockDocument, mockNgZone, mockPlatformUtil);
-            mockCalendar = new IgxCalendarComponent(platform);
+            mockCalendar = new IgxCalendarComponent(platform, 'en');
             mockDaysView = {
                 focusActiveDate: jasmine.createSpy()
             } as any;
             mockCalendar.daysView = mockDaysView;
         });
         /* eslint-enable @typescript-eslint/no-unused-vars */
         it('should set range dates correctly through selectRange method', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, null, platform, null, null, null, null);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, null, null, null, null);
             // dateRange.calendar = calendar;
             let startDate = new Date(2020, 3, 7);
             const endDate = new Date(2020, 6, 27);
@@ -165,7 +165,7 @@ describe('IgxDateRangePicker', () => {
         });
 
         it('should emit valueChange on selection', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, null, platform, null, null, null, null);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, null, null, null, null);
             // dateRange.calendar = calendar;
             spyOn(dateRange.valueChange, 'emit');
             let startDate = new Date(2017, 4, 5);
@@ -226,7 +226,7 @@ describe('IgxDateRangePicker', () => {
         });
 
         it('should validate correctly minValue and maxValue', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, null, platform, mockInjector, null, null, null);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, null, null, null);
             dateRange.ngOnInit();
 
             // dateRange.calendar = calendar;
@@ -277,7 +277,8 @@ describe('IgxDateRangePicker', () => {
         });
 
         it('should disable calendar dates when min and/or max values as strings are provided', fakeAsync(() => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, null, platform, mockInjector, null, null, null);
+            debugger
+            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en', platform, mockInjector, null, null, null);
             dateRange.ngOnInit();
 
             spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar);

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

@@ -35,6 +35,7 @@ import {
     DateRange, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent,
     IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent
 } from './date-range-picker-inputs.common';
+import { getLocaleFirstDayOfWeek } from "@angular/common";
 
 const SingleInputDatesConcatenationString = ' - ';
 
@@ -110,24 +111,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
      * ```
      */
     @Input()
-    public weekStart = 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.
@@ -611,6 +595,15 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     /** @hidden */
     public ngOnInit(): void {
         this._ngControl = this._injector.get<NgControl>(NgControl, null);
+
+        this.locale = this.locale || this._localeId;
+        if (this.weekStart === undefined) {
+            try {
+                this.weekStart = getLocaleFirstDayOfWeek(this.locale);
+            } catch (e) {
+                this.weekStart = getLocaleFirstDayOfWeek(this._localeId);
+            }
+        }
     }
 
     /** @hidden */

projects/igniteui-angular/src/lib/grids/columns/interfaces.ts

@@ -1,4 +1,5 @@
 import { ColumnType } from '../common/grid.interface';
+import { WEEKDAYS } from "../../calendar/calendar";
 
 
 /**
@@ -42,4 +43,7 @@ export interface IColumnPipeArgs {
      * The value is of type string. By default is set to 'symbol'
      */
     display?: string;
+
+    /** The first week day to be displayed in calendar when filtering or editing a date column */
+    weekStart?: number | WEEKDAYS;
 }

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

@@ -32,6 +32,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { ExpressionUI } from '../excel-style/common';
 import { ColumnType } from '../../common/grid.interface';
+import { getLocaleFirstDayOfWeek } from "@angular/common";
 
 /**
  * @hidden
@@ -278,6 +279,10 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         }
     }
 
+    public get localeId(): number {
+        return getLocaleFirstDayOfWeek(this.filteringService.grid.locale);
+    }
+
     /**
      * Event handler for keydown on the input group's prefix.
      */

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html

@@ -15,6 +15,7 @@
 </igx-select>
 
 <igx-date-picker #picker *ngIf="column.dataType === 'date'"
+    [weekStart]="column.pipeArgs.weekStart ?? localeId"
     [(value)]="expressionUI.expression.searchVal"
     [locale]="grid.locale"
     [outlet]="grid.outlet"

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts

@@ -4,6 +4,7 @@ import { DisplayDensity } from '../../../core/density';
 import { IgxInputDirective } from '../../../directives/input/input.directive';
 import { IgxDatePickerComponent } from '../../../date-picker/public_api';
 import { IgxTimePickerComponent } from '../../../time-picker/time-picker.component';
+import { getLocaleFirstDayOfWeek } from "@angular/common";
 
 /**
  * @hidden
@@ -33,4 +34,8 @@ export class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultEx
     public get inputTimePlaceholder(): string {
         return this.grid.resourceStrings['igx_grid_filter_row_time_placeholder'];
     }
+
+    public get localeId(): number {
+        return getLocaleFirstDayOfWeek(this.grid.locale);
+    }
 }

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -1162,7 +1162,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
 
             const sundayLabel = calendar.querySelectorAll('.igx-calendar__label')[0].innerHTML;
 
-            expect(sundayLabel.trim()).toEqual('So');
+            expect(sundayLabel.trim()).toEqual('Mo');
         }));
 
         it('Should size grid correctly if enable/disable filtering in run time.', fakeAsync(() => {