Merge branch '16.1.x' into nalipiev/migration-regex-alert-16.1

Author: kdinev

.github/workflows/nodejs.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x, 20.5.x]
+        node-version: [18.x, 20.5.x]
 
     steps:
       - name: Checkout
@@ -55,7 +55,7 @@ jobs:
       - name: Bundle Tree-Shake Test
         run: npm run build:bundletest
       - name: Publish to coveralls.io
-        if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '16.x'
+        if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '18.x'
         uses: coverallsapp/[email protected]
         with:
             github-token: ${{ github.token }}

CHANGELOG.md

@@ -79,6 +79,9 @@ All notable changes for each version of this project will be documented in this
     - **Behavioral Change** When there are already grouped columns, the group drop area now shows after dragging of a column starts and not when only click actions are performed.
 - `IgxCombo`, `IgxSimpleCombo`:
     - **Breaking Change**  The `selection` property returns an array of the selected items even when a value key is provided and the `value` property returns an array of value keys instead of display keys. Automatic migrations are available and will be applied on `ng update`.
+- Improved tree-shaking support for the `@igniteui/material-icons-extended` package.
+- Improved tree-shaking support for the `igniteui-angular-i18n` package.
+- Improved tree-shaking support for all grids.
 
 ## 16.0.0
 

README.md

@@ -65,9 +65,9 @@ Ignite UI for Angular arrives with an extensive library of data visualizations t
 Some of the Angular chart types included are: [Polar chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/polar-chart), [Pie chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/pie-chart), [Donut chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/donut-chart), [Bubble chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/bubble-chart), [Area chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/area-chart), [Treemap chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/treemap-chart), and many others. And if you look for [Angular financial charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart), with Ignite UI you can get the same features as the ones you come across with Google Finance and Yahoo Finance Charts.
 
 ### Build Apps with Ignite UI for Angular faster using our [App Builder](https://www.infragistics.com/products/appbuilder)
-![5661 drag drop](https://user-images.githubusercontent.com/1472513/132676597-09eec222-42f7-40ff-bd0d-fe8b91fd0c1c.gif)
+![Health Vault AB Angular Create](https://github.com/IgniteUI/igniteui-angular/assets/52001020/8f40a0a6-44f8-43fa-8407-c8800a7eae89)
 ### Generate your Angular code projects using the [App Builder](https://www.infragistics.com/products/appbuilder)
-![0871 change-preview-code](https://user-images.githubusercontent.com/1472513/132676607-3851f308-416b-45d6-99bc-c34266b55c44.gif)
+![Health Vault AB Angular Generate](https://github.com/IgniteUI/igniteui-angular/assets/52001020/78628738-6752-4ff3-b201-8a6b8cf279cf)
 
 ### Current List of Components Include:
 
@@ -116,7 +116,7 @@ Some of the Angular chart types included are: [Polar chart](https://www.infragis
 |toast|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/toast/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast)|5.1.0||||
 |tree|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tree/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tree)|12.0.0||||
 |tree grid|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/tree-grid/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid)|6.2.0||||
-|query builder|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/query-builder/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/query-builder)|14.2.0||||
+
 
 ### Components available in [igniteui-angular-charts](https://www.npmjs.com/package/igniteui-angular-charts)
 |Components||

ROADMAP.md

@@ -2,19 +2,12 @@
 
 # Current Milestone
 
-## Milestone 27, (Due by September, 2023)
-
-1. IgxDateRangePicker UX improvement [#11994](https://github.com/IgniteUI/igniteui-angular/issues/11994)
-2. **[DONE]** igniteui-angular as standalone component exports [#12698](https://github.com/IgniteUI/igniteui-angular/issues/12698)
-3. Resizing [IgxDrag] [#6283](https://github.com/IgniteUI/igniteui-angular/issues/6283)
-4. **[DONE]** IgxLabel: Split out the label theme from Input Group [#13211](https://github.com/IgniteUI/igniteui-angular/issues/13211)
-5. **[DONE]** RadioGroup: add label [#12890](https://github.com/IgniteUI/igniteui-angular/issues/12890)
-6. **[DONE]** Select item built-in prefix/suffix support [#13208](https://github.com/IgniteUI/igniteui-angular/issues/13208)
-7. **[DONE]** Icon: should be able to size via --ig-size [#13175](https://github.com/IgniteUI/igniteui-angular/issues/13175)
-8. **[DONE]** IgxForOf directive does not support as syntax in template for bound data [#13212](https://github.com/IgniteUI/igniteui-angular/issues/13212)
-9. **[DONE]** Stepper - Differences with the step indicаtor between WC and Angular [#12988](https://github.com/IgniteUI/igniteui-angular/issues/12988)
-10. **[DONE]** [IgxForOfDirective] use generic types #12182 (https://github.com/IgniteUI/igniteui-angular/issues/12182)
-11. **[DONE]** Button group justify items [#13138](https://github.com/IgniteUI/igniteui-angular/issues/13138)
+## Milestone 28, (Due by December, 2023)
+
+1. Support of Angular 17
+2. Refactor switch and radio to inherit from checkbox [#13563](https://github.com/IgniteUI/igniteui-angular/issues/13563)
+3. Improve package tree-shaking [#13562](https://github.com/IgniteUI/igniteui-angular/issues/13562)
+4.  **[DONE]** Improve package tree-shaking of animations [#13494](https://github.com/IgniteUI/igniteui-angular/pull/13494) part of [#13418](https://github.com/IgniteUI/igniteui-angular/pull/13418)
 
 ## Going down the road
 
@@ -27,9 +20,22 @@
 7. Switch overlay service from angular animations to native Web Animations [#8780](https://github.com/IgniteUI/igniteui-angular/issues/8780)
 8. Suggestion for igx-grid group by row template [#12752](https://github.com/IgniteUI/igniteui-angular/issues/12752)
 9. Way to filter auto-generated columns [#12577](https://github.com/IgniteUI/igniteui-angular/issues/12577)
+10. IgxDateRangePicker UX improvement [#11994](https://github.com/IgniteUI/igniteui-angular/issues/11994)
+11. Resizing [IgxDrag] [#6283](https://github.com/IgniteUI/igniteui-angular/issues/6283)
 
 # Previous Milestone
 
+## Milestone 27,  version 16.1 (Released Oct 5th, 2023) [Release Blog](https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-16-1-0)
+
+1. **[DONE]** Introduce `--ig-size` CSS variable. [#13389](https://github.com/IgniteUI/igniteui-angular/issues/13389) **NOTE**: DisplayDensity will be deprecated in `17.0.0` with `--ig-size` becoming the primary sizing approach.
+2. **[DONE]** Improved tree-shaking support for `igniteui-angular-i18n` [#13411](https://github.com/IgniteUI/igniteui-angular/issues/13411) part of [#13418](https://github.com/IgniteUI/igniteui-angular/pull/13418)
+3. **[DONE]** Improved tree-shaking support for `@igniteui/materials-icons-extended` [#13423](https://github.com/IgniteUI/igniteui-angular/pull/13494) part of [#13418](https://github.com/IgniteUI/igniteui-angular/pull/13418)
+4. **[DONE]** Improved tree-shaking support for all grid [#13412](https://github.com/IgniteUI/igniteui-angular/pull/13412) part of [#13418](https://github.com/IgniteUI/igniteui-angular/pull/13418)
+6. **[DONE]** IgxLabel: Split out the label theme from Input Group [#13211](https://github.com/IgniteUI/igniteui-angular/issues/13211)
+7. **[DONE]** RadioGroup: add label [#12890](https://github.com/IgniteUI/igniteui-angular/issues/12890)
+8. **[DONE]** Select item built-in prefix/suffix support [#13208](https://github.com/IgniteUI/igniteui-angular/issues/13208)
+9. **[DONE]** Stepper - Resolve differences in the step indicаtor between Web Components and Angular [#12988](https://github.com/IgniteUI/igniteui-angular/issues/12988)
+
 ## Milestone 26, version 16.0 (Released May 15th, 2023) [Release Blog](https://www.infragistics.com/community/blogs/b/infragistics/archive/2023/05/15/ignite-ui-for-angular-16-0-0-release)
 
 1. **[DONE]** Compatability with Angular 16.0
@@ -39,6 +45,8 @@
 5. **[DONE]** igniteui-angular as standalone component exports [#12698](https://github.com/IgniteUI/igniteui-angular/issues/12698)
 6. **[DONE]** Generate child igx-hierarchical-grids dynamically [#12765](https://github.com/IgniteUI/igniteui-angular/issues/12765)
 7. **[DONE]** Support height for card component [#12555](https://github.com/IgniteUI/igniteui-angular/issues/12555)
+8. **[DONE]** [IgxForOfDirective] use generic types #12182 (https://github.com/IgniteUI/igniteui-angular/issues/12182)
+9. **[DONE]** IgxForOf directive does not support as syntax in template for bound data [#13212](https://github.com/IgniteUI/igniteui-angular/issues/13212)
 
 ## Milestone 25, version 15.1 (Releasd March 28th, 2023) 
 

azure-pipelines.yml

@@ -4,7 +4,7 @@ pool:
 steps:
 - task: NodeTool@0
   inputs:
-    versionSpec: '16.x'
+    versionSpec: '18.x'
   displayName: 'Install Node.js'
 
 - script: npm ci

projects/igniteui-angular/src/lib/action-strip/action-strip.component.html

@@ -2,6 +2,7 @@
     <ng-content #content></ng-content>
     <ng-container *ngIf="menuItems.length > 0">
         <button
+            type="button"
             igxButton="icon"
             igxRipple
             [igxToggleAction]="dropdown"

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.html

@@ -1,16 +1,16 @@
 <ng-container *ngIf="!asMenuItem">
-    <button [title]="labelText" igxButton="icon" igxRipple (click)="handleClick($event)" (mousedown)="preventEvent($event)">
+    <button type="button" [title]="labelText" igxButton="icon" igxRipple (click)="handleClick($event)" (mousedown)="preventEvent($event)">
         <igx-icon *ngIf="iconSet" [family]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
         <igx-icon *ngIf="!iconSet" >{{iconName}}</igx-icon>
     </button>
 </ng-container>
 
 <ng-template #menuItemTemplate>
     <ng-container *ngIf="asMenuItem">
-        <div #container [className]='containerClass'>
+        <div #container [className]="containerClass">
             <igx-icon *ngIf="iconSet" [family]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
             <igx-icon *ngIf="!iconSet" >{{iconName}}</igx-icon>
             <label igxLabel>{{labelText}}</label>
         </div>
     </ng-container>
-</ng-template>
+</ng-template>

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

@@ -12,7 +12,7 @@
             </div>
             <div class="igx-banner__actions">
                 <ng-container *ngIf="useDefaultTemplate">
-                    <button igxButton="flat" igxRipple (click)="close()">
+                    <button type="button" igxButton="flat" igxRipple (click)="close()">
                         {{ resourceStrings.igx_banner_button_dismiss }}
                     </button>
                 </ng-container>

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

@@ -44,8 +44,8 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA
  * <igx-banner #banner>
  *   Our privacy settings have changed.
  *  <igx-banner-actions>
- *      <button igxButton="raised">Read More</button>
- *      <button igxButton="raised">Accept and Continue</button>
+ *      <button type="button" igxButton="raised">Read More</button>
+ *      <button type="button" igxButton="raised">Accept and Continue</button>
  *  </igx-banner-actions>
  * </igx-banner>
  * ```
@@ -220,7 +220,7 @@ export class IgxBannerComponent implements IToggleView {
      * <igx-banner #banner>
      * ...
      * </igx-banner>
-     * <button (click)="banner.open()">Open Banner</button>
+     * <button type="button" (click)="banner.open()">Open Banner</button>
      * ```
      */
     public open(event?: Event) {
@@ -249,7 +249,7 @@ export class IgxBannerComponent implements IToggleView {
      * <igx-banner #banner>
      * ...
      * </igx-banner>
-     * <button (click)="banner.close()">Close Banner</button>
+     * <button type="button" (click)="banner.close()">Close Banner</button>
      * ```
      */
     public close(event?: Event) {
@@ -278,7 +278,7 @@ export class IgxBannerComponent implements IToggleView {
      * <igx-banner #banner>
      * ...
      * </igx-banner>
-     * <button (click)="banner.toggle()">Toggle Banner</button>
+     * <button type="button" (click)="banner.toggle()">Toggle Banner</button>
      * ```
      */
     public toggle(event?: Event) {

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

@@ -28,8 +28,8 @@ Supporting directives and components:
     </igx-card-content>
 
     <igx-card-actions>
-        <button igxButton (click)="openUrl('https://www.facebook.com/pages/Elon-Musk/108250442531979')">Like</button>
-        <button igxButton (click)="openUrl('https://twitter.com/elonmusk')">Share</button>
+        <button type="button" igxButton (click)="openUrl('https://www.facebook.com/pages/Elon-Musk/108250442531979')">Like</button>
+        <button type="button" igxButton (click)="openUrl('https://twitter.com/elonmusk')">Share</button>
     </igx-card-actions>
 </igx-card>
 ```