Merging 16.1.x into master

.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/github-action@v1.2.1
         with:
             github-token: ${{ github.token }}

CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 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`:
@@ -79,6 +106,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
 

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

package.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",

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

@@ -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/package.json

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

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

@@ -187,8 +187,8 @@ export class IgxCardFooterDirective {
  *     <h5 igxCardHeaderSubtitle>{{subtitle}}</h5>
  *   </igx-card-header>
  *   <igx-card-actions>
- *       <button igxButton igxRipple>Share</button>
- *       <button igxButton igxRipple>Play Album</button>
+ *       <button type="button" igxButton igxRipple>Share</button>
+ *       <button type="button" igxButton igxRipple>Play Album</button>
  *   </igx-card-actions>
  * </igx-card>
  * ```

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

@@ -61,7 +61,7 @@ The **IgxCarousel** supports templating indicators and navigation buttons
 <igx-carousel #carousel>
         ...
     <ng-template igxCarouselNextButton let-disabled>
-        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
+        <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
             <igx-icon>add</igx-icon>
         </button>
     </ng-template>
@@ -73,7 +73,7 @@ The **IgxCarousel** supports templating indicators and navigation buttons
 <igx-carousel #carousel>
         ...
     <ng-template igxCarouselPrevButton let-disabled>
-        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
+        <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
             <igx-icon>remove</igx-icon>
         </button>
     </ng-template>

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

@@ -269,9 +269,9 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
      *  <igx-carousel #carousel>
      *      ...
      *      <ng-template igxCarouselNextButton let-disabled>
-     *            <button igxButton="fab" igxRipple="white" [disabled]="disabled">
-     *                <igx-icon>add</igx-icon>
-     *           </button>
+     *          <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
+     *              <igx-icon>add</igx-icon>
+     *          </button>
      *      </ng-template>
      *  </igx-carousel>
      * ```
@@ -292,9 +292,9 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
      *  <igx-carousel #carousel>
      *      ...
      *      <ng-template igxCarouselPrevButton let-disabled>
-     *            <button igxButton="fab" igxRipple="white" [disabled]="disabled">
-     *                <igx-icon>remove</igx-icon>
-     *           </button>
+     *          <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
+     *              <igx-icon>remove</igx-icon>
+     *          </button>
      *      </ng-template>
      *  </igx-carousel>
      * ```

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

@@ -650,7 +650,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      *  <igx-combo #combo>
      *      ...
      *      <ng-template igxComboAddItem>
-     *          <button class="combo__add-button">
+     *          <button type="button" igxButton="raised" class="combo__add-button">
      *              Click to add item
      *          </button>
      *      </ng-template>
@@ -1032,7 +1032,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      * A method that opens/closes the combo.
      *
      * ```html
-     * <button (click)="combo.toggle()">Toggle Combo</button>
+     * <button type="button" (click)="combo.toggle()">Toggle Combo</button>
      * <igx-combo #combo></igx-combo>
      * ```
      */
@@ -1052,7 +1052,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      * A method that opens the combo.
      *
      * ```html
-     * <button (click)="combo.open()">Open Combo</button>
+     * <button type="button" (click)="combo.open()">Open Combo</button>
      * <igx-combo #combo></igx-combo>
      * ```
      */
@@ -1070,7 +1070,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      * A method that closes the combo.
      *
      * ```html
-     * <button (click)="combo.close()">Close Combo</button>
+     * <button type="button" (click)="combo.close()">Close Combo</button>
      * <igx-combo #combo></igx-combo>
      * ```
      */

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

@@ -11,8 +11,8 @@
     <input igxInput #comboInput name="comboInput" type="text" [value]="displayValue.join(', ')" readonly
             [attr.placeholder]="placeholder" [disabled]="disabled"
             role="combobox" aria-haspopup="listbox"
-            [attr.aria-expanded]="!this.dropdown.collapsed" [attr.aria-controls]="this.dropdown.listId"
-            [attr.aria-labelledby]="this.ariaLabelledBy || this.label?.id || this.placeholder"
+            [attr.aria-expanded]="!dropdown.collapsed" [attr.aria-controls]="dropdown.listId"
+            [attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder"
             (blur)="onBlur()" />
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
@@ -28,15 +28,15 @@
     </igx-suffix>
     <igx-suffix class="igx-combo__toggle-button">
         <ng-container *ngIf="toggleIconTemplate">
-            <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
+            <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: collapsed}"></ng-container>
         </ng-container>
         <igx-icon *ngIf="!toggleIconTemplate">
             {{ toggleIcon }}
         </igx-icon>
     </igx-suffix>
 </igx-input-group>
 <igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity"
-    [labelledBy]="this.ariaLabelledBy || this.label?.id || this.placeholder || ''"
+    [labelledBy]="ariaLabelledBy || label?.id || placeholder || ''"
     [width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)"
     (opened)="handleOpened()" (closed)="handleClosed()">
     <div class="igx-combo__search">
@@ -57,8 +57,8 @@
     <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
         [style.maxHeight.rem]="itemsMaxHeightInRem" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
         [tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id" aria-multiselectable="true"
-        [attr.aria-activedescendant]="this.activeDescendant">
-        <igx-combo-item [itemHeight]='itemHeight' *igxFor="let item of data
+        [attr.aria-activedescendant]="activeDescendant">
+        <igx-combo-item [itemHeight]="itemHeight" *igxFor="let item of data
             | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction
             | comboGrouping:groupKey:valueKey:groupSortingDirection;
             index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
@@ -102,7 +102,7 @@
     <span>{{resourceStrings.igx_combo_empty_message}}</span>
 </ng-template>
 <ng-template #addItemDefault let-control>
-    <button igxButton="flat" igxRipple>Add item</button>
+    <button type="button" igxButton="flat" igxRipple>Add item</button>
 </ng-template>
 <ng-template #headerItemBase let-item let-key="valueKey" let-groupKey="groupKey">
     {{ item[key] }}

projects/igniteui-angular/src/lib/combo/combo.directives.ts

@@ -125,7 +125,7 @@ export class IgxComboHeaderItemDirective { }
  * @example
  * <igx-combo #combo>
  *      <ng-template igxComboAddItem>
- *          <button class="combo__add-button">
+ *          <button type="button" class="combo__add-button">
  *              Click to add item
  *          </button>
  *      </ng-template>

projects/igniteui-angular/src/lib/core/navigation/directives.ts

@@ -6,7 +6,7 @@ import { IgxNavigationService } from './nav.service';
  *
  * Usage:
  * ```
- * <button igxNavToggle="ID"> Toggle </button>
+ * <button type="button" igxNavToggle="ID">Toggle</button>
  * ```
  * Where the `ID` matches the ID of compatible `IToggleView` component.
  */
@@ -34,7 +34,7 @@ export class IgxNavigationToggleDirective {
  *
  * Usage:
  * ```
- * <button igxNavClose="ID"> Close </button>
+ * <button type="button" igxNavClose="ID">Close</button>
  * ```
  * Where the `ID` matches the ID of compatible `IToggleView` component.
  */

projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss

@@ -52,7 +52,7 @@
     }
 
     igc-rating::part(value-label) {
-        color: color(null, 'gray', 900);
+        color: var-get($theme, 'value-label');
     }
 
     igc-rating[disabled]::part(label),
@@ -61,9 +61,9 @@
     }
 
     igc-rating[disabled] {
-        --symbol-empty-color: var(--disabled-empty-symbol-color);
-        --symbol-full-color: var(--disabled-full-symbol-color);
-        --symbol-empty-filter: grayscale(100%) opacity(50%);
-        --symbol-full-filter: grayscale(50%);
+        --symbol-empty-color: #{var-get($theme, 'disabled-empty-symbol-color')};
+        --symbol-full-color: #{var-get($theme, 'disabled-full-symbol-color')};
+        --disabled-symbol-empty-filter: #{var-get($theme, 'symbol-empty-filter')};
+        --disabled-symbol-full-filter: #{var-get($theme, 'symbol-full-filter')};
     }
 }