Merge pull request #7618 from IgniteUI/ibarakov/fix-5280-master

Add list localization #5280

Author: kdinev

CHANGELOG.md

@@ -23,6 +23,12 @@ All notable changes for each version of this project will be documented in this
 - `IgxSelect` support for `igxHint` directive added.
     - Allows the user to add `igxHint` to be displayed bellow the input element.
 
+## 9.1.4
+
+### New Features
+- `IgxList`
+    - Added localization support.
+
 ## 9.1.1
 
 ### General
@@ -190,7 +196,6 @@ All notable changes for each version of this project will be documented in this
     - Added support for tabIndex attribute applied to the main chip element.
     - Added `tabIndex` input so it can support change detection as well.
 
-
 - `IgxHighlightDirective`
     - New `metadata` property was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.
 

projects/igniteui-angular/src/lib/core/i18n/list-resources.ts

@@ -0,0 +1,9 @@
+export interface IListResourceStrings {
+    igx_list_no_items?: string;
+    igx_list_loading?: string;
+}
+
+export const ListResourceStringsEN: IListResourceStrings = {
+    igx_list_no_items: 'There are no items in the list.',
+    igx_list_loading: 'Loading data from the server...'
+};

projects/igniteui-angular/src/lib/core/i18n/resources.ts

@@ -4,6 +4,7 @@ import { ITimePickerResourceStrings, TimePickerResourceStringsEN } from './time-
 import { PaginatorResourceStringsEN } from './paginator-resources';
 import { cloneValue } from '../utils';
 import { ICarouselResourceStrings, CarouselResourceStringsEN } from './carousel-resources';
+import { ListResourceStringsEN } from './list-resources';
 
 export interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings, ICarouselResourceStrings  {}
 
@@ -16,6 +17,7 @@ export const CurrentResourceStrings = {
     TimePickerResStrings: cloneValue(TimePickerResourceStringsEN),
     DateRangePickerResStrings: cloneValue(DateRangePickerResourceStringsEN),
     CarouselResStrings: cloneValue(CarouselResourceStringsEN),
+    ListResStrings: cloneValue(ListResourceStringsEN),
 };
 
 function updateResourceStrings(currentStrings: IResourceStrings, newStrings: IResourceStrings ) {

projects/igniteui-angular/src/lib/list/list.common.ts

@@ -1,5 +1,7 @@
 import { Directive, TemplateRef, EventEmitter, QueryList, Optional, Inject } from '@angular/core';
 import { DisplayDensityBase, IDisplayDensityOptions, DisplayDensityToken } from '../core/density';
+import { CurrentResourceStrings } from '../core/i18n/resources';
+import { IListResourceStrings } from '../core/i18n/list-resources';
 
 export interface IListChild {
     index: number;

projects/igniteui-angular/src/lib/list/list.component.html

@@ -2,13 +2,13 @@
 
 <ng-template #defaultEmptyList>
     <article class="message">
-        There are no items in the list.
+        {{resourceStrings.igx_list_no_items}}
     </article>
 </ng-template>
 
 <ng-template #defaultDataLoading>
     <article class="message">
-        Loading data from the server...
+        {{resourceStrings.igx_list_loading}}
     </article>
 </ng-template>
 

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

@@ -30,6 +30,8 @@ import {
 } from './list.common';
 import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensity } from '../core/density';
 import { IBaseEventArgs } from '../core/utils';
+import { IListResourceStrings } from '../core/i18n/list-resources';
+import { CurrentResourceStrings } from '../core/i18n/resources';
 
 let NEXT_ID = 0;
 
@@ -148,6 +150,23 @@ export class IgxListLineSubTitleDirective {
     providers: [{ provide: IgxListBaseDirective, useExisting: IgxListComponent }]
 })
 export class IgxListComponent extends IgxListBaseDirective {
+    /**
+     * Sets the resource strings.
+     * By default it uses EN resources.
+     */
+   @Input()
+   set resourceStrings(value: IListResourceStrings) {
+       this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+   }
+
+    /**
+     * Returns the resource strings.
+     */
+    get resourceStrings(): IListResourceStrings {
+        return this._resourceStrings;
+    }
+
+    private _resourceStrings = CurrentResourceStrings.ListResStrings;
 
     constructor(public element: ElementRef,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {

projects/igniteui-angular/src/public_api.ts

@@ -113,5 +113,6 @@ export { IGridResourceStrings } from './lib/core/i18n/grid-resources';
 export { IPaginatorResourceStrings } from './lib/core/i18n/paginator-resources';
 export { ITimePickerResourceStrings } from './lib/core/i18n/time-picker-resources';
 export { IDateRangePickerResourceStrings } from './lib/core/i18n/date-range-picker-resources';
+export { IListResourceStrings } from './lib/core/i18n/list-resources';
 export { InteractionMode } from './lib/core/enums';
 export { SplitterType } from './lib/splitter/splitter.component';