Merge pull request #13658 from IgniteUI/i18n-changelog

docs(i18n): updating docs and exports for i18n

Author: kdinev

CHANGELOG.md

@@ -13,6 +13,9 @@ All notable changes for each version of this project will be documented in this
     - `igniteui-angular-i18n` is now tree-shakeable
     - `igniteui-angular/animations` is now tree-shakeable
     - `igniteui-angular` components have improved tree-shaking
+    - **Breaking Change** `getCurrentResourceStrings` has been removed. Use the specific component string imports instead. 
+        - E.g. EN strings come from `igniteui-angular`: `import { GridResourceStringsEN } from 'igniteui-angular';`
+        - E.g. DE or other language strings come from `igniteui-angular-i18n`: `import { GridResourceStringsDE } from 'igniteui-angular-i18n';`
 - DisplayDensity token and inputs are deprecated in favor of `--ig-size` theming
 - We're working on reducing the library size
     - `IgxRadioComponent` size has been reduced in half

package-lock.json

@@ -53,14 +53,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.0",
-    "@angular/common": "^17.0.0",
-    "@angular/compiler": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.0.0",
-    "@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/router": "^17.0.0",
+    "@angular/animations": "^17.0.1",
+    "@angular/common": "^17.0.1",
+    "@angular/compiler": "^17.0.1",
+    "@angular/core": "^17.0.1",
+    "@angular/forms": "^17.0.1",
+    "@angular/platform-browser": "^17.0.1",
+    "@angular/platform-browser-dynamic": "^17.0.1",
+    "@angular/router": "^17.0.1",
     "@igniteui/material-icons-extended": "^3.0.0",
     "@types/hammerjs": "^2.0.40",
     "@types/source-map": "0.5.2",
@@ -83,8 +83,8 @@
     "@angular-eslint/schematics": "^17.0.0",
     "@angular-eslint/template-parser": "^17.0.0",
     "@angular/cli": "^17.0.0",
-    "@angular/compiler-cli": "^17.0.0",
-    "@angular/language-service": "^17.0.0",
+    "@angular/compiler-cli": "^17.0.1",
+    "@angular/language-service": "^17.0.1",
     "@angularclass/hmr": "^3.0.0",
     "@types/estree": "^1.0.0",
     "@types/jasmine": "^5.1.1",
@@ -132,4 +132,4 @@
     "typedoc-plugin-localization": "^3.0.3",
     "typescript": "5.2.2"
   }
-}
+}

package.json

@@ -111,22 +111,22 @@ export { CancelableEventArgs, CancelableBrowserEventArgs } from './lib/core/util
 /**
  * i18n
  */
-export { igxI18N, IResourceStrings, getCurrentResourceStrings, changei18n } from './lib/core/i18n/resources';
-export { ICarouselResourceStrings } from './lib/core/i18n/carousel-resources';
-export { IGridResourceStrings } from './lib/core/i18n/grid-resources';
-export { IComboResourceStrings } from './lib/core/i18n/combo-resources';
-export { IPaginatorResourceStrings } from './lib/core/i18n/paginator-resources';
-export { ICalendarResourceStrings } from './lib/core/i18n/calendar-resources';
-export { ITimePickerResourceStrings } from './lib/core/i18n/time-picker-resources';
-export { IDatePickerResourceStrings } from './lib/core/i18n/date-picker-resources';
-export { IDateRangePickerResourceStrings } from './lib/core/i18n/date-range-picker-resources';
-export { IListResourceStrings } from './lib/core/i18n/list-resources';
-export { ITreeResourceStrings } from './lib/core/i18n/tree-resources';
-export { IInputResourceStrings } from './lib/core/i18n/input-resources';
-export { IChipResourceStrings } from './lib/core/i18n/chip-resources';
-export { IActionStripResourceStrings } from './lib/core/i18n/action-strip-resources';
-export { IQueryBuilderResourceStrings } from './lib/core/i18n/query-builder-resources';
-export { IBannerResourceStrings } from './lib/core/i18n/banner-resources';
+export { igxI18N, IResourceStrings, changei18n } from './lib/core/i18n/resources';
+export { ICarouselResourceStrings, CarouselResourceStringsEN } from './lib/core/i18n/carousel-resources';
+export { IGridResourceStrings, GridResourceStringsEN } from './lib/core/i18n/grid-resources';
+export { IComboResourceStrings, ComboResourceStringsEN } from './lib/core/i18n/combo-resources';
+export { IPaginatorResourceStrings, PaginatorResourceStringsEN } from './lib/core/i18n/paginator-resources';
+export { ICalendarResourceStrings, CalendarResourceStringsEN } from './lib/core/i18n/calendar-resources';
+export { ITimePickerResourceStrings, TimePickerResourceStringsEN } from './lib/core/i18n/time-picker-resources';
+export { IDatePickerResourceStrings, DatePickerResourceStringsEN } from './lib/core/i18n/date-picker-resources';
+export { IDateRangePickerResourceStrings, DateRangePickerResourceStringsEN } from './lib/core/i18n/date-range-picker-resources';
+export { IListResourceStrings, ListResourceStringsEN } from './lib/core/i18n/list-resources';
+export { ITreeResourceStrings, TreeResourceStringsEN } from './lib/core/i18n/tree-resources';
+export { IInputResourceStrings, InputResourceStringsEN } from './lib/core/i18n/input-resources';
+export { IChipResourceStrings, ChipResourceStringsEN } from './lib/core/i18n/chip-resources';
+export { IActionStripResourceStrings, ActionStripResourceStringsEN } from './lib/core/i18n/action-strip-resources';
+export { IQueryBuilderResourceStrings, QueryBuilderResourceStringsEN } from './lib/core/i18n/query-builder-resources';
+export { IBannerResourceStrings, BannerResourceStringsEN } from './lib/core/i18n/banner-resources';
 
 /* IMPORTANT: The following are NgModules exported for backwards-compatibility before standalone components */
 export * from './lib/accordion/accordion.module';

projects/igniteui-angular/src/public_api.ts

@@ -1,7 +1,15 @@
 <div class="sample-column">
     <div class="grid-wrapper">
         <igx-grid #grid [data]="data" [autoGenerate]="false" height="520px" width="100%"
-            [allowFiltering]="true" [locale]="locale" displayDensity="compact">
+            [allowFiltering]="true" [locale]="locale">
+            <igx-grid-toolbar>
+                <igx-grid-toolbar-title>Grid with Localization</igx-grid-toolbar-title>
+                <igx-select [(ngModel)]="locale" (ngModelChange)="updateLocale()">
+                    <igx-select-item *ngFor="let locale of selectLocales" [value]="locale">
+                        {{ locale }}
+                    </igx-select-item>
+                </igx-select>
+            </igx-grid-toolbar>
             <igx-column field="Category" header="Category" [dataType]="'string'" [groupable]="true">
             </igx-column>
             <igx-column field="Type" header="Type" [sortable]="true" [hasSummary]="true" [editable]="true"
@@ -14,10 +22,5 @@
             <igx-column field="Buy" header="Buy" [dataType]="'number'" [groupable]="true">
             </igx-column>
         </igx-grid>
-        <igx-select [(ngModel)]="locale" (ngModelChange)="updateLocale()">
-            <igx-select-item *ngFor="let locale of selectLocales" [value]="locale">
-                {{ locale }}
-            </igx-select-item>
-        </igx-select>
     </div>
 </div>

src/app/grid-localization/grid-localization.sample.html

@@ -1,10 +1,16 @@
-.sample-column {
-    display: flex;
-    flex-flow: row wrap !important;
-    width: 100%;
-    height: 100vh;
-}
+:host {
+
+    .sample-column {
+        display: flex;
+        flex-flow: row wrap !important;
+        width: 100%;
+        height: 100vh;
+    }
+
+    .grid-wrapper {
+        width: 70%;
+    }
+
+    --ig-size: var(--ig-size-small);
 
-.grid-wrapper {
-    width: 70%;
 }