Merge branch '20.1.x' into dependabot/npm_and_yarn/astro-5.13.2

Author: ChronosSF

.github/workflows/nodejs.yml

@@ -16,8 +16,8 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [20.x, 22.x]
-s
+        node-version: [20.x, 22.17.1]
+
     steps:
       - name: Checkout
         uses: actions/checkout@v4

angular.json

@@ -307,8 +307,8 @@
                 {
                   "type": "bundle",
                   "name": "styles",
-                  "maximumWarning": "450kb",
-                  "maximumError": "480kb"
+                  "maximumWarning": "500kb",
+                  "maximumError": "550kb"
                 },
                 {
                   "type": "anyComponentStyle",

package-lock.json

@@ -274,7 +274,6 @@ export var registerConfig = [
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
       { name: "pinnedStartColumns" },
@@ -571,7 +570,6 @@ export var registerConfig = [
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
       { name: "pinnedStartColumns" },
@@ -755,7 +753,6 @@ export var registerConfig = [
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedStartColumns" },
       { name: "pinnedEndColumns" },
@@ -882,7 +879,6 @@ export var registerConfig = [
       { name: "cdr" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedStartColumns" },
       { name: "pinnedEndColumns" },
@@ -1034,7 +1030,6 @@ export var registerConfig = [
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
       { name: "pinnedStartColumns" },

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -9,7 +9,7 @@
         <ng-content select="igx-hint, [igxHint]"></ng-content>
     </ng-container>
     <input igxInput #comboInput name="comboInput" type="text" [value]="displayValue" readonly
-        [attr.placeholder]="placeholder" [disabled]="disabled"
+        [attr.placeholder]="placeholder" [disabled]="disabled" [igxReadOnlyInput]="false"
         role="combobox" aria-haspopup="listbox"
         [attr.aria-expanded]="!dropdown.collapsed" [attr.aria-controls]="dropdown.listId"
         [attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder"

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

@@ -25,6 +25,7 @@ import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navig
 import { IgxIconComponent } from '../icon/icon.component';
 import { IgxSuffixDirective } from '../directives/suffix/suffix.directive';
 import { IgxInputDirective } from '../directives/input/input.directive';
+import { IgxReadOnlyInputDirective } from '../directives/input/read-only-input.directive';
 
 /** Event emitted when an igx-combo's selection is changing */
 export interface IComboSelectionChangingEventArgs extends IBaseCancelableEventArgs {
@@ -115,6 +116,7 @@ const diffInSets = (set1: Set<any>, set2: Set<any>): any[] => {
         IgxComboAddItemComponent,
         IgxButtonDirective,
         IgxRippleDirective,
+        IgxReadOnlyInputDirective,
         IgxComboFilteringPipe,
         IgxComboGroupingPipe
     ]

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

@@ -54,7 +54,7 @@
 
     %igx-badge-value {
         white-space: nowrap;
-        padding-inline: rem(4px);
+        padding-inline: pad-inline(rem(4px));
     }
 
     %igx-badge--success {

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -34,15 +34,15 @@
         justify-content: flex-end;
         flex-wrap: wrap;
         gap: rem(8px);
-        padding: rem(16px) rem(8px);
+        padding: pad-block(rem(16px)) pad-inline(rem(8px));
         min-width: rem(320px);
         background: var-get($theme, 'banner-background');
         box-shadow: inset 0 rem(-1px) 0 0 var-get($theme, 'banner-border-color');
         border-radius: var-get($theme, 'border-radius');
 
         @if $variant == 'indigo' {
             box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'banner-border-color');
-            padding: rem(16px);
+            padding: pad(rem(16px));
         }
 
         igc-icon,
@@ -79,7 +79,7 @@
         @if $variant == 'indigo' {
             gap: rem(8px);
         } @else {
-            padding: 0 rem(8px);
+            padding: 0 pad-inline(rem(8px));
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -12,7 +12,7 @@
     $menu-height: rem(56px);
     $item-min-width: rem(80px);
     $item-max-width: rem(168px);
-    $item-padding: 0 rem(12px, 16px);
+    $item-padding: 0 pad-inline(rem(12px, 16px));
 
     %igx-bottom-nav-panel {
         display: block;
@@ -115,7 +115,7 @@
         color: var-get($theme, 'icon-color');
 
         @if $variant != 'indigo' {
-            padding: 0 rem(8px);
+            padding: 0 pad-inline(rem(8px));
             height: rem(24px);
             transform: translateZ(0);
             transition: transform .15s $in-out-quad;

projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -42,10 +42,10 @@
     ), $variant);
 
     $header-padding: map.get((
-        'material': rem(16px) rem(24px),
-        'fluent': rem(16px),
-        'bootstrap': rem(16px),
-        'indigo': rem(16px),
+        'material': pad-block(rem(16px)) pad-inline(rem(24px)),
+        'fluent': pad(rem(16px)),
+        'bootstrap': pad(rem(16px)),
+        'indigo': pad(rem(16px)),
     ), $variant);
 
     $arrow-gap: map.get((
@@ -57,8 +57,8 @@
 
     $date-view-row-gap: rem(4px);
 
-    $cal-row-padding: rem(8px);
-    $cal-row-margin: rem(2px) 0;
+    $cal-row-padding: pad(rem(8px));
+    $cal-row-margin: pad-block(rem(2px)) 0;
 
     %parent-container {
         color: var-get($theme, 'content-foreground');
@@ -134,29 +134,29 @@
 
     @if $bootstrap-theme {
         %days-view {
-            padding-block-end: rem(16px);
+            padding-block-end: pad-block(rem(16px));
             padding-block-start: 0;
             padding-inline: 0;
         }
 
         %days-view + %days-view {
             %days-view-row {
-                padding-inline-start: rem(22px);
+                padding-inline-start: pad-inline(rem(22px));
             }
         }
 
         %days-view:first-child,
         %days-view:nth-child(even) {
             %days-view-row {
-                padding-inline-end: rem(22px);
+                padding-inline-end: pad-inline(rem(22px));
             }
         }
 
 
         %days-view:last-child,
         %days-view:first-child:only-child {
             %days-view-row {
-                padding-inline-end: rem(12px);
+                padding-inline-end: pad-inline(rem(12px));
             }
         }
 
@@ -185,7 +185,7 @@
             }
 
             %days-view:last-child {
-                padding-inline-end: pad-block(rem(12px));
+                padding-inline-end: pad-inline(rem(12px));
             }
         }
     }
@@ -273,7 +273,7 @@
         display: flex;
 
         @if $bootstrap-theme {
-            padding-block-end: rem(8px);
+            padding-block-end: pad-block(rem(8px));
         } @else {
             margin: 0;
         }
@@ -362,7 +362,7 @@
         gap: rem(24px);
         position: relative;
         height: if($variant == 'indigo', rem(50px), rem(56px));
-        padding-inline: if($variant == 'material', rem(24px), rem(16px));
+        padding-inline: pad-inline(if($variant == 'material', rem(24px), rem(16px)));
         color: var-get($theme, 'picker-foreground');
         background: var-get($theme, 'picker-background');
 
@@ -416,7 +416,7 @@
         cursor: pointer;
 
         @if $variant == 'indigo' {
-            padding: rem(5px);
+            padding: pad(rem(5px));
         }
 
         @if $bootstrap-theme {