Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into bundle-test-extended

Author: kdinev

CHANGELOG.md

@@ -16,6 +16,33 @@ All notable changes for each version of this project will be documented in this
     - IgxRadioComponent has been reduced in half
     - IgxSwitchComponent has been reduced in half
 
+## 16.1.4
+### New Features
+- `Themes`:
+    - **Experimental** - Added the ability to configure the base font-size used to calculate the rem values in all component themes. This allows for proper scaling of components when a different document font-size is used.
+
+    - Code example:
+
+    ```scss
+    // Configure the base font-size
+    @use 'igniteui-theming/sass/config' as * with (
+        $base-font-size: 10px // <-- 10px == 1rem
+    );
+
+    // Standard imports and theme declarations
+    @use 'igniteui-angular/src/lib/core/styles/themes' as *;
+
+    // This change also adds a new CSS variable `--ig-base-font-size`
+    // that you can use to configure your own stylesheets:
+    html {
+        font-size: var(--ig-base-font-size); // 10px
+    }
+
+    @include core();
+    @include typography();
+    @include theme();
+    ``` 
+
 ## 16.1.0
 ### New Features
 - `IgxSelect`:
@@ -93,6 +120,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
 

package-lock.json

@@ -67,7 +67,7 @@
     "@types/source-map": "0.5.2",
     "fflate": "^0.7.3",
     "hammerjs": "^2.0.8",
-    "igniteui-theming": "^3.1.1",
+    "igniteui-theming": "^3.3.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^6.6.7",

package.json

@@ -478,7 +478,7 @@ export class UpdateChanges {
     protected updateSassVariables(entryPath: string) {
         let fileContent = this.host.read(entryPath).toString();
         let overwrite = false;
-        const allowedStartCharacters = new RegExp('(\:|\,)\s?', 'g');
+        const allowedStartCharacters = new RegExp(/(:|,)\s?/, 'g');
         // eslint-disable-next-line no-control-regex
         const allowedEndCharacters = new RegExp('[;),: \r\n]', 'g');
         for (const change of this.themeChanges.changes) {

projects/igniteui-angular/migrations/common/UpdateChanges.ts

@@ -76,7 +76,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^3.1.1",
+        "igniteui-theming": "^3.3.0",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -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/action-strip.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/action-strip/grid-actions/grid-action-button.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.html

@@ -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>
  * ```
@@ -217,7 +217,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) {
@@ -246,7 +246,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) {
@@ -275,7 +275,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/banner/banner.component.ts

@@ -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>
 ```