From 54a2b0d587b12d9b13dc436e274101644360e432 Mon Sep 17 00:00:00 2001 From: Volen99 Date: Mon, 4 Jul 2022 09:34:53 +0300 Subject: [PATCH 1/6] feat(calendar): implement weekStart and locale feature --- CHANGELOG.md | 10 +++ .../src/lib/calendar/README.md | 4 +- .../src/lib/calendar/calendar-base.ts | 34 +++++++-- .../lib/calendar/calendar.component.spec.ts | 75 ++++++++++++++++++- .../src/lib/calendar/calendar.ts | 4 +- .../calendar/days-view/days-view.component.ts | 7 +- .../lib/date-common/picker-base.directive.ts | 53 ++++++++++--- .../date-picker/date-picker.component.spec.ts | 50 ++++++++++++- .../lib/date-picker/date-picker.component.ts | 13 +--- .../date-range-picker.component.spec.ts | 52 +++++++++++-- .../date-range-picker.component.ts | 36 +-------- .../src/lib/grids/cell.component.html | 1 + .../src/lib/grids/columns/interfaces.ts | 5 +- .../advanced-filtering-dialog.component.html | 1 + .../base/grid-filtering-row.component.html | 1 + .../base/grid-filtering-row.component.ts | 1 + ...excel-style-date-expression.component.html | 1 + .../excel-style-date-expression.component.ts | 5 ++ .../grids/grid/expandable-cell.component.html | 2 +- .../lib/grids/grid/grid-filtering-ui.spec.ts | 37 ++++++++- .../grids/tree-grid/tree-cell.component.html | 1 + .../time-picker/time-picker.component.spec.ts | 16 ++-- .../lib/time-picker/time-picker.component.ts | 1 + 23 files changed, 321 insertions(+), 89 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9ffd22375b8..3b40436faa7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ 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` @@ -11,6 +15,12 @@ All notable changes for each version of this project will be documented in this - `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 diff --git a/projects/igniteui-angular/src/lib/calendar/README.md b/projects/igniteui-angular/src/lib/calendar/README.md index 84da9b46f6d..16207fbdf5f 100644 --- a/projects/igniteui-angular/src/lib/calendar/README.md +++ b/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` diff --git a/projects/igniteui-angular/src/lib/calendar/calendar-base.ts b/projects/igniteui-angular/src/lib/calendar/calendar-base.ts index 7f83250c458..183959364c7 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar-base.ts +++ b/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(); } diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts index c7711702e27..7ffb5094427 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts +++ b/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(); + })); }); }); }); diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.ts b/projects/igniteui-angular/src/lib/calendar/calendar.ts index 727331a2c92..af6d414dcf7 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.ts +++ b/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; } diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts index 500246e2f22..f9e2be3c75c 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts +++ b/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); } /** diff --git a/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts b/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts index df20136d4df..8159226cc56 100644 --- a/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts +++ b/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 * * ``` */ + /** + * 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. diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts index 2ea7229d03c..80421e14f6d 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts +++ b/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 { UntypedFormControl, UntypedFormGroup, 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,46 @@ 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 +610,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; @@ -608,7 +650,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); diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index 6bd5bd816bc..487ef11456d 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -64,16 +64,6 @@ let NEXT_ID = 0; }) export class IgxDatePickerComponent extends PickerBaseDirective implements ControlValueAccessor, Validator, OnInit, AfterViewInit, OnDestroy, AfterViewChecked { - /** - * Gets/Sets on which day the week starts. - * - * @example - * ```html - * - * ``` - */ - @Input() - public weekStart: WEEKDAYS | number = WEEKDAYS.SUNDAY; /** * Gets/Sets whether the inactive dates will be hidden. @@ -485,6 +475,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions?: IDisplayDensityOptions, @Optional() @Inject(IGX_INPUT_GROUP_TYPE) protected _inputGroupType?: IgxInputGroupType) { super(element, _localeId, _displayDensityOptions, _inputGroupType); + this.locale = this.locale || this._localeId; } /** @hidden @internal */ @@ -724,6 +715,8 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr /** @hidden @internal */ public ngOnInit(): void { this._ngControl = this._injector.get(NgControl, null); + + this.locale = this.locale || this._localeId; } /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts index 20e6b96af1e..c4e739ff3ba 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts @@ -20,7 +20,7 @@ import { AutoPositionStrategy, IgxOverlayService } from '../services/public_api' import { AnimationMetadata, AnimationOptions } from '@angular/animations'; import { IgxPickersCommonModule } from '../date-common/public_api'; import { IgxCalendarContainerComponent, IgxCalendarContainerModule } from '../date-common/calendar-container/calendar-container.component'; -import { IgxCalendarComponent } from '../calendar/public_api'; +import { IgxCalendarComponent, WEEKDAYS } from '../calendar/public_api'; import { Subject } from 'rxjs'; import { CommonModule } from '@angular/common'; import { AnimationService } from '../services/animation/animation'; @@ -142,7 +142,7 @@ describe('IgxDateRangePicker', () => { mockAnimationService = new IgxAngularAnimationService(mockAnimationBuilder); overlay = new IgxOverlayService( mockFactoryResolver, mockApplicationRef, mockInjector, mockAnimationBuilder, mockDocument, mockNgZone, mockPlatformUtil, mockAnimationService); - mockCalendar = new IgxCalendarComponent(platform); + mockCalendar = new IgxCalendarComponent(platform, 'en'); mockDaysView = { focusActiveDate: jasmine.createSpy() } as any; @@ -150,7 +150,7 @@ describe('IgxDateRangePicker', () => { }); /* 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); @@ -168,7 +168,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); @@ -229,7 +229,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; @@ -280,7 +280,7 @@ 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); + const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, null, null, null); dateRange.ngOnInit(); spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar); @@ -1356,6 +1356,46 @@ describe('IgxDateRangePicker', () => { .toHaveBeenCalledWith(overlayContent, jasmine.anything(), document, jasmine.anything(), dateRange.element.nativeElement); })); + it('Should the weekStart property takes precedence over locale.', fakeAsync(() => { + fixture = TestBed.createComponent(DateRangeCustomComponent); + fixture.detectChanges(); + dateRange = fixture.componentInstance.dateRange; + + dateRange.locale = 'en'; + fixture.detectChanges(); + + expect(dateRange.weekStart).toEqual(0); + + dateRange.weekStart = WEEKDAYS.FRIDAY; + expect(dateRange.weekStart).toEqual(5); + + dateRange.locale = 'fr'; + fixture.detectChanges(); + + expect(dateRange.weekStart).toEqual(5); + + flush(); + })); + + it('Should passing invalid value for locale, then setting weekStart must be respected.', fakeAsync(() => { + fixture = TestBed.createComponent(DateRangeCustomComponent); + fixture.detectChanges(); + dateRange = fixture.componentInstance.dateRange; + + const locale = 'en-US'; + dateRange.locale = locale; + fixture.detectChanges(); + + expect(dateRange.locale).toEqual(locale); + expect(dateRange.weekStart).toEqual(WEEKDAYS.SUNDAY) + + dateRange.locale = 'frrr'; + dateRange.weekStart = WEEKDAYS.FRIDAY; + fixture.detectChanges(); + + expect(dateRange.locale).toEqual('en-US'); + expect(dateRange.weekStart).toEqual(WEEKDAYS.FRIDAY); + })); }); }); }); diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts index b94bb20e8f7..773898b2717 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts @@ -98,37 +98,6 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective @Input() public hideOutsideDays: boolean; - /** - * The start day of the week. - * - * @remarks - * Can be assigned to a numeric value or to `WEEKDAYS` enum value. - * - * @example - * ```html - * - * ``` - */ - @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 - * - * ``` - */ - @Input() - public locale: string; - /** * A custom formatter function, applied on the selected or passed in date. * @@ -443,7 +412,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective private onValidatorChange: () => void = noop; constructor(public element: ElementRef, - @Inject(LOCALE_ID) protected _localeId: any, + @Inject(LOCALE_ID) protected _localeId: string, protected platform: PlatformUtil, private _injector: Injector, private _moduleRef: NgModuleRef, @@ -452,6 +421,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions?: IDisplayDensityOptions, @Optional() @Inject(IGX_INPUT_GROUP_TYPE) protected _inputGroupType?: IgxInputGroupType) { super(element, _localeId, _displayDensityOptions, _inputGroupType); + this.locale = this.locale || this._localeId; } /** @hidden @internal */ @@ -611,6 +581,8 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective /** @hidden */ public ngOnInit(): void { this._ngControl = this._injector.get(NgControl, null); + + this.locale = this.locale || this._localeId; } /** @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index 115942f7de1..6b6743ee205 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -104,6 +104,7 @@ [outlet]="grid.outlet" mode="dropdown" [locale]="grid.locale" + [weekStart]="column.pipeArgs.weekStart" [(value)]="editValue" [igxFocus]="true" > diff --git a/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts b/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts index ac2e9bf7012..555e2a420c2 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts @@ -1,5 +1,5 @@ import { ColumnType } from '../common/grid.interface'; - +import { WEEKDAYS } from "../../calendar/calendar"; /** * @hidden @@ -42,6 +42,9 @@ 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?: WEEKDAYS | number; } export interface ISortingOptions { diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html index aa65ffdcda9..c3527d95e9b 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html @@ -194,6 +194,7 @@
[readOnly]="true" [displayDensity]="'compact'" [locale]="grid.locale" + [weekStart]="selectedColumn.pipeArgs.weekStart" [outlet]="grid.outlet" [displayFormat]="selectedColumn.pipeArgs.format" [placeholder]="grid.resourceStrings.igx_grid_filter_row_date_placeholder" diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html index 41b9bad2399..669fe6450d4 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html @@ -52,6 +52,7 @@ [displayFormat]="column.pipeArgs.format" [formatter]="column.formatter" [placeholder]="placeholder" + [weekStart]="column.pipeArgs.weekStart" [displayDensity]="displayDensity" (keydown)="onInputKeyDown($event)" (focusout)="onInputGroupFocusout()" diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts index f3d9e22b473..6f364308393 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts +++ b/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 diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html index f30148835cb..a9df0340014 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html @@ -15,6 +15,7 @@ + [locale]="grid.locale" [weekStart]="column.pipeArgs.weekStart" [(value)]="editValue" [igxFocus]="true"> diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 6c689f04742..cbdee304778 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/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(() => { @@ -4709,6 +4709,41 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { expect(grid.filteredData.length).toEqual(1); })); + it('Should take pipeArgs weekStart property as calendar\'s default.', fakeAsync(() => { + const column = grid.getColumnByName('ReleaseDate'); + + column.pipeArgs = { + digitsInfo: '3.4-4', + currencyCode: 'USD', + display: 'symbol-narrow', + weekStart: 5, + }; + fix.detectChanges(); + + // Open excel style custom filtering dialog. + GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate'); + tick(100); + fix.detectChanges(); + GridFunctions.clickExcelFilterCascadeButton(fix); + fix.detectChanges(); + GridFunctions.clickOperatorFromCascadeMenu(fix, 0); + tick(200); + + const expr = GridFunctions.getExcelCustomFilteringDateExpressions(fix)[0]; + const datePicker = expr.querySelector('igx-date-picker'); + const input = datePicker.querySelector('input'); + UIInteractions.simulateClickEvent(input); + fix.detectChanges(); + + // Get Calendar component. + const calendar = document.querySelector('igx-calendar'); + + const daysOfWeek = calendar.querySelector('.igx-calendar__body-row'); + const weekStart = daysOfWeek.firstElementChild as HTMLSpanElement; + + expect(weekStart.innerText).toMatch('Fri'); + })); + it('Should filter grid with ISO 8601 dates through custom date filter dialog', fakeAsync(() => { fix.componentInstance.data = SampleTestData.excelFilteringData().map(rec => { const newRec = Object.assign({}, rec) as any; diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html index e580e1ef9c8..667cf614506 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html @@ -99,6 +99,7 @@ [outlet]="grid.outlet" mode="dropdown" [locale]="grid.locale" + [weekStart]="column.pipeArgs.weekStart" [(value)]="editValue" [igxFocus]="true" > diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts index 64969b416cc..1e35df8d72e 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts @@ -189,7 +189,7 @@ describe('IgxTimePicker', () => { }); mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['detectChanges']); - timePicker = new IgxTimePickerComponent(elementRef, null, null, null, mockInjector, null, mockCdr); + timePicker = new IgxTimePickerComponent(elementRef, 'en', null, null, mockInjector, null, mockCdr); (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective; (timePicker as any)._inputGroup = mockInputGroup; (timePicker as any).inputDirective = mockInputDirective; @@ -290,7 +290,7 @@ describe('IgxTimePicker', () => { }); it('should open/close the dropdown with toggle() method', () => { - timePicker = new IgxTimePickerComponent(elementRef, null, null, null, mockInjector, null, mockCdr); + timePicker = new IgxTimePickerComponent(elementRef, 'en', null, null, mockInjector, null, mockCdr); (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective; const mockToggleDirective = jasmine.createSpyObj('IgxToggleDirective', ['open', 'close'], { collapsed: true }); (timePicker as any).toggleRef = mockToggleDirective; @@ -305,7 +305,7 @@ describe('IgxTimePicker', () => { }); it('should reset value and emit valueChange with clear() method', () => { - timePicker = new IgxTimePickerComponent(elementRef, null, null, null, mockInjector, null, mockCdr); + timePicker = new IgxTimePickerComponent(elementRef, 'en', null, null, mockInjector, null, mockCdr); (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective; const mockToggleDirective = jasmine.createSpyObj('IgxToggleDirective', { collapsed: true }); (timePicker as any).toggleRef = mockToggleDirective; @@ -332,7 +332,7 @@ describe('IgxTimePicker', () => { }); it('should not emit valueChange when value is \'00:00:00\' and is cleared', () => { - timePicker = new IgxTimePickerComponent(elementRef, null, null, null, mockInjector, null, mockCdr); + timePicker = new IgxTimePickerComponent(elementRef, 'en', null, null, mockInjector, null, mockCdr); (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective; const mockToggleDirective = jasmine.createSpyObj('IgxToggleDirective', { collapsed: true }); (timePicker as any).toggleRef = mockToggleDirective; @@ -348,7 +348,7 @@ describe('IgxTimePicker', () => { }); it('should not emit valueChange when value is null and is cleared', () => { - timePicker = new IgxTimePickerComponent(elementRef, null, null, null, mockInjector, null, mockCdr); + timePicker = new IgxTimePickerComponent(elementRef, 'en', null, null, mockInjector, null, mockCdr); (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective; const mockToggleDirective = jasmine.createSpyObj('IgxToggleDirective', { collapsed: true }); (timePicker as any).toggleRef = mockToggleDirective; @@ -361,7 +361,7 @@ describe('IgxTimePicker', () => { }); it('should select time and trigger valueChange event with select() method', () => { - timePicker = new IgxTimePickerComponent(elementRef, null, null, null, mockInjector, null, mockCdr); + timePicker = new IgxTimePickerComponent(elementRef, 'en', null, null, mockInjector, null, mockCdr); (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective; const date = new Date(2020, 12, 12, 10, 30, 30); @@ -382,7 +382,7 @@ describe('IgxTimePicker', () => { const date = new Date(2020, 12, 12, 10, 30, 30); const updatedDate = new Date(2020, 12, 12, 11, 30, 30); - timePicker = new IgxTimePickerComponent(elementRef, null, null, null, mockInjector, null, mockCdr); + timePicker = new IgxTimePickerComponent(elementRef, 'en', null, null, mockInjector, null, mockCdr); const mockToggleDirective = jasmine.createSpyObj('IgxToggleDirective', ['close'], { collapsed: true }); timePicker['dateTimeEditor'] = mockDateTimeEditorDirective; timePicker['inputDirective'] = mockInputDirective; @@ -414,7 +414,7 @@ describe('IgxTimePicker', () => { }); it('should validate correctly minValue and maxValue', () => { - timePicker = new IgxTimePickerComponent(elementRef, null, null, null, mockInjector, null, mockCdr); + timePicker = new IgxTimePickerComponent(elementRef, 'en', null, null, mockInjector, null, mockCdr); timePicker['dateTimeEditor'] = mockDateTimeEditorDirective; timePicker['inputDirective'] = mockInputDirective; timePicker.ngOnInit(); diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts index 1aa044af1ff..09642dc5799 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts @@ -613,6 +613,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective private platform: PlatformUtil, private cdr: ChangeDetectorRef) { super(element, _localeId, _displayDensityOptions, _inputGroupType); + this.locale = this.locale || this._localeId; } /** @hidden @internal */ From 6fbdd33beb4ccff16c34d12eaec3a3dfd5268a90 Mon Sep 17 00:00:00 2001 From: Volen99 Date: Mon, 4 Jul 2022 11:01:11 +0300 Subject: [PATCH 2/6] fix(test): fix failing test --- .../src/lib/date-picker/date-picker.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts index 80421e14f6d..1dfc6991bb8 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts @@ -650,7 +650,7 @@ describe('IgxDatePicker', () => { expect(datePicker.spinLoop).toEqual(true); expect(datePicker.tabIndex).toEqual(undefined); expect(datePicker.overlaySettings).toEqual(undefined); - expect(datePicker.locale).toEqual('en-US'); + expect(datePicker.locale).toEqual('ES'); expect(datePicker.placeholder).toEqual(''); expect(datePicker.readOnly).toEqual(false); expect(datePicker.value).toEqual(undefined); From 854f13e213065a09168a9b19ff5caeb1ea5acb1f Mon Sep 17 00:00:00 2001 From: Volen99 Date: Mon, 4 Jul 2022 11:45:20 +0300 Subject: [PATCH 3/6] fix(test): fix failing test --- .../src/lib/date-picker/date-picker.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts index 1dfc6991bb8..80421e14f6d 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts @@ -650,7 +650,7 @@ describe('IgxDatePicker', () => { expect(datePicker.spinLoop).toEqual(true); expect(datePicker.tabIndex).toEqual(undefined); expect(datePicker.overlaySettings).toEqual(undefined); - expect(datePicker.locale).toEqual('ES'); + expect(datePicker.locale).toEqual('en-US'); expect(datePicker.placeholder).toEqual(''); expect(datePicker.readOnly).toEqual(false); expect(datePicker.value).toEqual(undefined); From 58d3aa42718420546ad751d0bcda3c17a50a946d Mon Sep 17 00:00:00 2001 From: Volen99 Date: Mon, 4 Jul 2022 14:13:17 +0300 Subject: [PATCH 4/6] fix(test): fix failing test --- .../src/lib/date-picker/date-picker.component.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts index 80421e14f6d..5828650b2d6 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts @@ -624,7 +624,7 @@ describe('IgxDatePicker', () => { UIInteractions.clearOverlay(); }); describe('API tests', () => { - it('Should initialize and update all inputs properly', () => { + fit('Should initialize and update all inputs properly', () => { // no ngControl initialized expect(datePicker.required).toEqual(false); datePicker.ngOnInit(); @@ -771,7 +771,7 @@ describe('IgxDatePicker', () => { datePicker.overlaySettings = customSettings; expect(datePicker.overlaySettings).toEqual(customSettings); datePicker.locale = 'ES'; - expect(datePicker.locale).toEqual('ES'); + expect(datePicker.locale).toEqual('en-US'); datePicker.placeholder = 'Buenos dias, muchachos'; expect(datePicker.placeholder).toEqual('Buenos dias, muchachos'); datePicker.readOnly = true; From 0b7c1cf2f91e372daa68992d6917e668deea2146 Mon Sep 17 00:00:00 2001 From: Volen99 Date: Mon, 4 Jul 2022 14:26:32 +0300 Subject: [PATCH 5/6] fix(test): remove forgotten fit --- .../src/lib/date-picker/date-picker.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts index 5828650b2d6..850120d787c 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts @@ -624,7 +624,7 @@ describe('IgxDatePicker', () => { UIInteractions.clearOverlay(); }); describe('API tests', () => { - fit('Should initialize and update all inputs properly', () => { + it('Should initialize and update all inputs properly', () => { // no ngControl initialized expect(datePicker.required).toEqual(false); datePicker.ngOnInit(); From 236f0f906c9f7e7e60850fc9e94c1ab49c250871 Mon Sep 17 00:00:00 2001 From: Volen99 Date: Wed, 6 Jul 2022 08:25:31 +0300 Subject: [PATCH 6/6] chore(*): add samples, remove left fit and debugger --- .../src/lib/grids/grid/grid.sorting.spec.ts | 1 - .../src/lib/grids/state.directive.spec.ts | 24 ------------------- src/app/calendar/calendar.sample.html | 5 ++++ src/app/calendar/calendar.sample.ts | 8 +++++++ src/app/date-picker/date-picker.sample.html | 6 +++++ src/app/date-picker/date-picker.sample.scss | 10 ++++++++ src/app/date-picker/date-picker.sample.ts | 8 +++++++ src/app/date-range/date-range.sample.html | 7 ++++++ src/app/date-range/date-range.sample.ts | 15 ++++++++++-- 9 files changed, 57 insertions(+), 27 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts index 400597e296d..0648270484e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts @@ -583,7 +583,6 @@ describe('IgxGrid - Grid Sorting #grid', () => { grid.sortingOptions = {mode: 'single'}; fixture.detectChanges(); - debugger; expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('unfold_more'); diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts index 8942d1e71df..f32a7b4b9e8 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts @@ -618,30 +618,6 @@ describe('IgxGridState - input properties #grid', () => { expect(gridState).toBe(expansionState); }); - // fit('createExpressionsTreeFromObject should return null when columns are still not resolved', () => { - // const fix = TestBed.createComponent(IgxGridStateComponent); - // fix.detectChanges(); - // fix.componentInstance.ngOnInit(); - // fix.detectChanges(); - // const grid = fix.componentInstance.grid; - // // grid.columnList = new QueryList(); - // const state = fix.componentInstance.state; - // // eslint-disable-next-line max-len - // - // const advFilteringState = '{"advancedFiltering":{"filteringOperands":[{"fieldName":"InStock","condition":{"name":"true","isUnary":true,"iconName":"is-true"},"searchVal":null,"ignoreCase":true},{"fieldName":"ProductID","condition":{"name":"greaterThan","isUnary":false,"iconName":"greater-than"},"searchVal":"3","ignoreCase":true}],"operator":0,"type":1}}'; - // const initialState = '{"advancedFiltering":{}}'; - // const advFilteringStateObject = JSON.parse(advFilteringState); - // - // let gridState = state.getState(true, 'advancedFiltering'); - // expect(gridState).toBe(initialState); - // - // state.setState(advFilteringStateObject); - // gridState = state.getState(false, 'advancedFiltering') as IGridState; - // - // let areColumnsResolved = grid.columnList.length > 0 || !!gridState.columns - // - // expect(areColumnsResolved).toBe(false); - // }); }); class HelperFunctions { diff --git a/src/app/calendar/calendar.sample.html b/src/app/calendar/calendar.sample.html index ae0fc2dab66..8b356132406 100644 --- a/src/app/calendar/calendar.sample.html +++ b/src/app/calendar/calendar.sample.html @@ -12,6 +12,11 @@

Calendar Sample (NO Card wrapper)

Default Calendar

+ + + + +
diff --git a/src/app/calendar/calendar.sample.ts b/src/app/calendar/calendar.sample.ts index 1bc01b39a9e..f57627182a7 100644 --- a/src/app/calendar/calendar.sample.ts +++ b/src/app/calendar/calendar.sample.ts @@ -88,4 +88,12 @@ export class CalendarSampleComponent implements OnInit { public deselect() { this.calendar.deselectDate(); } + + public changeLocale(locale: string) { + this.calendar.locale = locale; + } + + public changeWeekStart(value: number) { + this.calendar.weekStart = value; + } } diff --git a/src/app/date-picker/date-picker.sample.html b/src/app/date-picker/date-picker.sample.html index 86fe1640753..bdd5784be2b 100644 --- a/src/app/date-picker/date-picker.sample.html +++ b/src/app/date-picker/date-picker.sample.html @@ -60,6 +60,12 @@

Additional Icons And Custom Buttons

+
+ + + + +
diff --git a/src/app/date-picker/date-picker.sample.scss b/src/app/date-picker/date-picker.sample.scss index 58d85895464..28eeb2865b1 100644 --- a/src/app/date-picker/date-picker.sample.scss +++ b/src/app/date-picker/date-picker.sample.scss @@ -20,3 +20,13 @@ igx-date-picker { margin-bottom: 10px; } + + +.date-picker-sample-buttons { + margin-bottom: 16px; + + button { + margin-right: 8px; + margin-bottom: 8px; + } +} diff --git a/src/app/date-picker/date-picker.sample.ts b/src/app/date-picker/date-picker.sample.ts index 5030ac769b4..2fe35a024c7 100644 --- a/src/app/date-picker/date-picker.sample.ts +++ b/src/app/date-picker/date-picker.sample.ts @@ -24,4 +24,12 @@ export class DatePickerSampleComponent { public disabledDates: DateRangeDescriptor[] = [{ type: DateRangeType.Specific, dateRange: [this.date1, this.date2, this.date3] }]; public specialDates: DateRangeDescriptor[] = [{ type: DateRangeType.Specific, dateRange: [this.date5, this.date6, this.date7] }]; + + public changeLocale(locale: string) { + this.datePicker.locale = locale; + } + + public changeWeekStart(value: number) { + this.datePicker.weekStart = value; + } } diff --git a/src/app/date-range/date-range.sample.html b/src/app/date-range/date-range.sample.html index b7ab150c602..4e6d5be5504 100644 --- a/src/app/date-range/date-range.sample.html +++ b/src/app/date-range/date-range.sample.html @@ -5,6 +5,13 @@
Without forms

Default range picker

+
+ + + + +
+

Drop down single input with custom suffix

diff --git a/src/app/date-range/date-range.sample.ts b/src/app/date-range/date-range.sample.ts index 8baccffc736..ee8ea9d852b 100644 --- a/src/app/date-range/date-range.sample.ts +++ b/src/app/date-range/date-range.sample.ts @@ -1,6 +1,6 @@ -import { Component } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, ValidatorFn, AbstractControl } from '@angular/forms'; -import { DateRange, IChangeRadioEventArgs } from 'igniteui-angular'; +import { DateRange, IChangeRadioEventArgs, IgxDateRangePickerComponent } from 'igniteui-angular'; @Component({ selector: 'app-date-range', @@ -8,6 +8,9 @@ import { DateRange, IChangeRadioEventArgs } from 'igniteui-angular'; styleUrls: ['./date-range.sample.scss'] }) export class DateRangeSampleComponent { + @ViewChild('dr1', { static: true }) + private dateRangePicker: IgxDateRangePickerComponent; + public range: DateRange = { start: new Date('2000,10,1'), end: new Date('2000,10,20') }; public range1: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) }; public range2: DateRange; @@ -54,6 +57,14 @@ export class DateRangeSampleComponent { this.reactiveForm.setControl(name, newControl); }); } + + public changeLocale(locale: string) { + this.dateRangePicker.locale = locale; + } + + public changeWeekStart(value: number) { + this.dateRangePicker.weekStart = value; + } } const minDateValidator = (minValue: Date): ValidatorFn => (control: AbstractControl): { [key: string]: any } | null => { if (control.value && (control.value.start as Date).getTime() < minValue.getTime()) {