Merge branch 'master' into sboykova/editable-date-picker

CHANGELOG.md

@@ -26,6 +26,7 @@ All notable changes for each version of this project will be documented in this
     - Added a new `igxToolbarCustomContent` directive which can be used to mark an `ng-template` which provides a custom content for the IgxGrid's toolbar ([#2983](https://github.com/IgniteUI/igniteui-angular/issues/2983))
     - Summary results are now calculated and displayed by default for each row group when 'Group By' feature is enabled.
     - `clearSummaryCache()` and `recalculateSummaries()` methods are deprecated. The grid will clear the cache and recalculate the summaries automatically when needed.
+	- `locale` property added. If not set, it returns browser's language. All child components will use it as locale.
     - **Breaking change** `IgxSummaryOperand.operate()` method is called with empty data in order to calculate the necessary height for the summary row. For custom summary operands, the method should always return an array of `IgxSummaryResult` with proper length.
 - `IgxIconModule`:
     - **Breaking change** `igxIconService` is now provided in root (providedIn: 'root') and `IgxIconModule.forRoot()` method is deprecated.

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

@@ -142,7 +142,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
 
     /**
      * Gets the `locale` of the calendar.
-     * Default value is `"en"`.
+     * By default the browser's language is used.
      * ```typescript
      * let locale =  this.calendar.locale;
      * ```
@@ -156,7 +156,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
     /**
      * Sets the `locale` of the calendar.
      * Expects a valid BCP 47 language tag.
-     * Default value is `"en"`.
+     * By default the browser's language is used.
      * ```html
      * <igx-calendar [locale] = "de"></igx-calendar>
      * ```
@@ -613,7 +613,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
     /**
     *@hidden
     */
-    private _locale = 'en';
+    private _locale = window.navigator.language;
     /**
      *@hidden
      */

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

@@ -105,8 +105,41 @@ export enum DatePickerInteractionMode {
     styles: [':host {display: block;}'],
     templateUrl: 'date-picker.component.html'
 })
-
 export class IgxDatePickerComponent implements IgxDatePickerBase, ControlValueAccessor, EditorProvider, OnInit, OnDestroy, AfterViewInit {
+    /**
+     * An @Input property that sets the `IgxDatePickerComponent` label.
+     * The default label is 'Date'.
+     * ```html
+     * <igx-date-picker [label]="Calendar"></igx-date-picker>
+     * ```
+     */
+    @Input()
+    public label = 'Date';
+
+    /**
+     * An @Input property that sets the `IgxDatePickerComponent` label visibility.
+     * By default the visibility is set to true.
+     * <igx-date-picker [labelVisibility]="false"></igx-date-picker>
+     */
+    @Input()
+    public labelVisibility = true;
+
+    /**
+     *An @Input property that sets locales. By default the browser's language is used.
+     *```html
+     *<igx-date-picker locale="ja-JP" [value]="date"></igx-date-picker>
+     *```
+     */
+    @Input() public locale: string = window.navigator.language;
+
+    /**
+     *An @Input property that sets on which day the week starts.
+     *```html
+     *<igx-date-picker [weekStart]="WEEKDAYS.FRIDAY" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
+     *```
+     */
+    @Input() public weekStart: WEEKDAYS | number = WEEKDAYS.SUNDAY;
+
     /**
      *Returns the format options of the `IgxDatePickerComponent`.
      *```typescript
@@ -380,40 +413,6 @@ export class IgxDatePickerComponent implements IgxDatePickerBase, ControlValueAc
     @Input()
     public disabled: boolean;
 
-    /**
-     * An @Input property that sets the `IgxDatePickerComponent` label.
-     * The default label is 'Date'.
-     * ```html
-     * <igx-date-picker [label]="Calendar"></igx-date-picker>
-     * ```
-     */
-    @Input()
-    public label = 'Date';
-
-    /**
-     * An @Input property that sets the `IgxDatePickerComponent` label visibility.
-     * By default the visibility is set to true.
-     * <igx-date-picker [labelVisibility]="false"></igx-date-picker>
-     */
-    @Input()
-    public labelVisibility = true;
-
-    /**
-     *An @Input property that sets locales. Default locale is en.
-     *```html
-     *<igx-date-picker locale="ja-JP" [value]="date"></igx-date-picker>
-     *```
-     */
-    @Input() public locale: string = Constants.DEFAULT_LOCALE_DATE;
-
-    /**
-     *An @Input property that sets on which day the week starts.
-     *```html
-     *<igx-date-picker [weekStart]="WEEKDAYS.FRIDAY" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
-     *```
-     */
-    @Input() public weekStart: WEEKDAYS | number = WEEKDAYS.SUNDAY;
-
     /**
      *An @Input proeprty that sets the orientation of the `IgxDatePickerComponent` header.
      *```html
@@ -562,7 +561,8 @@ export class IgxDatePickerComponent implements IgxDatePickerBase, ControlValueAc
     public dateFormatParts = [];
     public rawData;
 
-    private enDateFormatPipe = new DateFormatPipe(Constants.DEFAULT_LOCALE_DATE);
+    // TODO: create const for en language
+    private enDateFormatPipe = new DateFormatPipe('en');
     private _destroy$ = new Subject<boolean>();
     private _componentID;
 
@@ -949,8 +949,8 @@ export class IgxDatePickerComponent implements IgxDatePickerBase, ControlValueAc
         });
     }
 
-    private _setLocaleToDate(value: Date, locale: string = Constants.DEFAULT_LOCALE_DATE): string {
-        return value.toLocaleDateString(locale);
+    private _setLocaleToDate(value: Date): string {
+        return value.toLocaleDateString(this.locale);
     }
 
     private _getCursorPosition(): number {
@@ -997,7 +997,7 @@ export class IgxDatePickerComponent implements IgxDatePickerBase, ControlValueAc
      * @param date passed date
      */
     private _customFormatChecker(formatter: (_: Date) => string, date: Date) {
-        return this.formatter ? this.formatter(date) : this._setLocaleToDate(date, this.locale);
+        return this.formatter ? this.formatter(date) : this._setLocaleToDate(date);
     }
 
     private _onTouchedCallback: () => void = () => { };
@@ -1010,10 +1010,6 @@ export class IgxDatePickerComponent implements IgxDatePickerBase, ControlValueAc
     }
 }
 
-class Constants {
-    public static readonly DEFAULT_LOCALE_DATE = 'en';
-}
-
 /**
  * The IgxDatePickerModule provides the {@link IgxDatePickerComponent} inside your application.
  */

projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

@@ -166,7 +166,7 @@ export class IgxDropDownItemNavigationDirective {
 
 /**
  * **Ignite UI for Angular DropDown** -
- * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop-down.html)
+ * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop_down.html)
  *
  * The Ignite UI for Angular Drop Down displays a scrollable list of items which may be visually grouped and
  * supports selection of a single item. Clicking or tapping an item selects it and closes the Drop Down

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

@@ -186,6 +186,7 @@ Below is the list of all inputs that the developers may set to configure the gri
 |`transactions`| `TransactionService` | Transaction provider allowing access to all transactions and states of the modified rows. |
 |`summaryPosition`| GridSummaryPosition | The summary row position for the child levels. The default is top. |
 |`summaryCalculationMode`| GridSummaryCalculationMode | The summary calculation mode. The default is rootAndChildLevels, which means summaries are calculated for root and child levels. |
+|`locale`| string | Determines the locale of the grid. By default returns browser's language. |
 
 ### Outputs
 

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -4,7 +4,7 @@
         <div class="igx-grid__td-text">{{ formatter ? formatter(value) : value }}</div>
     </ng-container>
     <ng-template #default>
-        <div class="igx-grid__td-text">{{ column.dataType === 'number' ? (value | igxdecimal) : (value | igxdate) }}</div>
+        <div class="igx-grid__td-text">{{ column.dataType === 'number' ? (value | igxdecimal: grid.locale) : (value | igxdate: grid.locale) }}</div>
     </ng-template>
 </ng-template>
 <ng-template #inlineEditor  let-cell="cell">
@@ -22,7 +22,7 @@
         <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [igxFocus]="focused" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-date-picker (onSelection)="editValue = $event" [value]="editValue" [igxFocus]="focused" [labelVisibility]="false"></igx-date-picker>
+        <igx-date-picker (onSelection)="editValue = $event" [locale]="grid.locale" [value]="editValue" [igxFocus]="focused" [labelVisibility]="false"></igx-date-picker>
     </ng-container>
 </ng-template>
 <ng-container *ngTemplateOutlet="template; context: context">

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

@@ -24,19 +24,21 @@
             tabindex="0"
             [placeholder]="placeholder"
             autocomplete="off"
-            [(ngModel)]="value"
+            [value]="value"
+            (input)="onInput($event)"
             [type]="type"
             [readonly]="isUnaryCondition"
             (click)="onInputClick()"
-            (keydown)="onInputKeyDown($event)"/>
+            (keydown)="onInputKeyDown($event)"
+            (keyup)="onInputKeyUp($event)"/>
             <igx-suffix *ngIf="value || value === 0" (keydown)="onClearKeyDown($event)" (click)="clearInput()" tabindex="0">
                 <igx-icon>clear</igx-icon>
             </igx-suffix>
     </igx-input-group>
 </ng-template>
 
 <ng-template #defaultDateUI>
-    <igx-date-picker tabindex="0" [(ngModel)]="value" [locale]="locale" (onClose)="datePickerClose()">
+    <igx-date-picker tabindex="0" [(ngModel)]="value" [locale]="filteringService.grid.locale" (onClose)="datePickerClose()">
         <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-displayData="displayData">
             <igx-input-group type="box" [displayDensity]="'compact'" [supressInputAutofocus]="true">
                 <igx-prefix #inputGroupPrefix

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

@@ -60,6 +60,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
     private chipsAreaWidth: number;
     private chipAreaScrollOffset = 0;
     private _column = null;
+    private isKeyPressed = false;
 
     public showArrows: boolean;
     public expression: IFilteringExpression;
@@ -101,10 +102,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         this.filter();
     }
 
-    get locale() {
-        return window.navigator.language;
-    }
-
     @ViewChild('defaultFilterUI', { read: TemplateRef })
     protected defaultFilterUI: TemplateRef<any>;
 
@@ -233,6 +230,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
      * Event handler for keydown on the input.
      */
     public onInputKeyDown(event: KeyboardEvent) {
+        this.isKeyPressed = true;
+
         if (this.column.dataType === DataType.Boolean) {
             if ((event.key === KEYS.ENTER || event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE) &&
             this.dropDownConditions.collapsed) {
@@ -274,6 +273,24 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         event.stopPropagation();
     }
 
+    /**
+     * Event handler for keyup on the input.
+     */
+    public onInputKeyUp(eventArgs) {
+        this.isKeyPressed = false;
+    }
+
+    /**
+     * Event handler for input on the input.
+     */
+    public onInput(eventArgs) {
+        // The 'iskeyPressed' flag is needed for a case in IE, because the input event is fired on focus and for some reason,
+        // when you have a japanese character as a placeholder, on init the value here is empty string .
+        if (this.isKeyPressed) {
+            this.value = eventArgs.target.value;
+        }
+    }
+
     /**
      * Event handler for input click event.
      */

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

@@ -9,8 +9,8 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { IForOfState } from '../../directives/for-of/for_of.directive';
 import { IgxGridFilterConditionPipe } from '../grid-common.pipes';
-import { TitleCasePipe, DatePipe } from '@angular/common';
-import { IgxColumnComponent, IgxColumnGroupComponent } from '../grid';
+import { TitleCasePipe } from '@angular/common';
+import { IgxColumnComponent, IgxColumnGroupComponent, IgxDatePipeComponent } from '../grid';
 
 const FILTERING_ICONS_FONT_SET = 'filtering-icons';
 
@@ -38,7 +38,7 @@ export class IgxFilteringService implements OnDestroy {
     private columnToExpressionsMap = new Map<string, ExpressionUI[]>();
     private filterPipe = new IgxGridFilterConditionPipe();
     private titlecasePipe = new TitleCasePipe();
-    private datePipe = new DatePipe(window.navigator.language);
+    private _datePipe: IgxDatePipeComponent;
     private columnStartIndex = -1;
 
     public gridId: string;
@@ -76,6 +76,13 @@ export class IgxFilteringService implements OnDestroy {
         return this.gridAPI.get(this.gridId);
     }
 
+    public get datePipe(): IgxDatePipeComponent {
+        if (!this._datePipe) {
+            this._datePipe = new IgxDatePipeComponent(this.grid.locale);
+        }
+        return this._datePipe;
+    }
+
     /**
      * Subscribe to grid's events.
      */
@@ -286,7 +293,7 @@ export class IgxFilteringService implements OnDestroy {
         if (expression.condition.isUnary) {
             return this.grid.resourceStrings[`igx_grid_filter_${expression.condition.name}`] || expression.condition.name;
         } else if (expression.searchVal instanceof Date) {
-            return this.datePipe.transform(expression.searchVal);
+            return this.datePipe.transform(expression.searchVal, this.grid.locale);
         } else {
             return expression.searchVal;
         }

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

@@ -187,6 +187,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     private _resourceStrings = CurrentResourceStrings.GridResStrings;
     private _emptyGridMessage = null;
     private _emptyFilteredGridMessage = null;
+    private _locale = null;
     /**
      * An accessor that sets the resource strings.
      * By default it uses EN resources.
@@ -292,6 +293,26 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * Returns the locale of the grid.
+     * If not set, returns browser's language.
+     */
+    @Input()
+    get locale(): string {
+        if (this._locale) {
+            return this._locale;
+        } else {
+            return window.navigator.language;
+        }
+    }
+
+    /**
+     * Sets the locale of the grid.
+     */
+    set locale(value) {
+        this._locale = value;
+    }
+
     /**
      * Returns an array of objects containing the filtered data in the `IgxGridComponent`.
      * ```typescript

projects/igniteui-angular/src/lib/grids/grid.common.ts

@@ -26,6 +26,8 @@ import { ConnectedPositioningStrategy } from '../services';
 import { getPointFromPositionsSettings, VerticalAlignment, PositionSettings } from '../services/overlay/utilities';
 import { scaleInVerBottom, scaleInVerTop } from '../animations/main';
 
+const DEFAULT_DATE_FORMAT = 'mediumDate';
+
 /**
  * @hidden
  */
@@ -574,9 +576,13 @@ export class IgxDatePipeComponent extends DatePipe implements PipeTransform {
         // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
         super(locale);
     }
-    transform(value: any): string {
+    transform(value: any, locale: string): string {
         if (value && value instanceof Date) {
-            return super.transform(value);
+            if (locale) {
+                return super.transform(value, DEFAULT_DATE_FORMAT, undefined, locale);
+            } else {
+                return super.transform(value);
+            }
         } else {
             return value;
         }
@@ -593,9 +599,13 @@ export class IgxDecimalPipeComponent extends DecimalPipe implements PipeTransfor
         // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
         super(locale);
     }
-    transform(value: any): string {
+    transform(value: any, locale: string): string {
         if (value && typeof value === 'number') {
-            return super.transform(value);
+            if (locale) {
+                return super.transform(value, undefined, locale);
+            } else {
+                return super.transform(value);
+            }
         } else {
             return value;
         }