Merge branch '20.1.x' into sstoychev/fix-paginator-201

Author: Zneeky

.github/workflows/nodejs.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [20.x, 22.x]
+        node-version: [22.x]
 
     steps:
       - name: Checkout
@@ -50,7 +50,7 @@ jobs:
             npm run test:schematics
             npm run test:i18n
         env:
-            NODE_OPTIONS: --max_old_space_size=4096 ${{ matrix.node-version == '22.x' && '--no-experimental-strip-types' || '' }}
+            NODE_OPTIONS: --max_old_space_size=4096 --no-experimental-strip-types
             TZ: America/New_York
       - name: Build i18n & validate output
         run: |
@@ -71,7 +71,6 @@ jobs:
       - name: Bundle Tree-Shake & SSR Test
         run: npm run build:bundletest
       - name: Publish to coveralls.io
-        if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '20.x'
-        uses: coverallsapp/github-action@v2.3.4
+        uses: coverallsapp/github-action@v2
         with:
             github-token: ${{ github.token }}

projects/igniteui-angular-elements/src/index.html

@@ -178,11 +178,14 @@
 
     .igx-input-group {
         %igx-combo__toggle-button {
+            cursor: pointer;
             background: var-get($theme, 'toggle-button-background');
             color: var-get($theme, 'toggle-button-foreground');
         }
 
         %igx-combo__clear-button {
+            cursor: pointer;
+
             @if $variant == 'bootstrap' {
                 border-inline-end: rem(1px) solid var(--border-color);
             }
@@ -286,4 +289,12 @@
             }
         }
     }
+
+    igx-combo {
+        %form-group-input,
+        %form-group-prefix,
+        %form-group-suffix {
+            cursor: pointer;
+        }
+    }
 }

projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss

@@ -511,6 +511,7 @@
         grid-template-rows: auto auto auto 1fr auto auto;
         grid-template-columns: 100%;
         overflow: hidden;
+        contain: inline-size;
         box-shadow: $grid-shadow;
 
         @if $variant == 'fluent' {
@@ -1267,7 +1268,7 @@
         outline-style: none;
 
         igx-icon {
-            --component-size: #{if($variant == 'indigo', 2, 3)};
+            --ig-size: #{if($variant == 'indigo', 2, 3)};
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -59,8 +59,8 @@
     $material-box-top-padding: sizable(rem(16px), rem(20px), rem(24px));
     $material-border-top-padding: sizable(rem(8px), rem(12px), rem(16px));
 
-    $textarea-top-padding: map.get((
-        'material': rem(0px),
+    $textarea-padding: map.get((
+        'material': sizable(rem(8px), rem(12px), rem(16px)),
         'fluent': sizable(rem(6px), rem(10px), rem(14px)),
         'bootstrap': sizable(rem(4px), rem(8px), rem(12px)),
         'indigo': sizable(rem(4px), rem(6px), rem(8px)),
@@ -149,6 +149,7 @@
         [igxPrefix] {
             @extend %form-group-prefix;
             outline-style: none;
+            cursor: default;
 
             &:first-child {
                 @if $variant == 'fluent' {
@@ -164,6 +165,7 @@
         [igxSuffix] {
             @extend %form-group-suffix;
             outline-style: none;
+            cursor: default;
 
             &:last-child {
                 @if $variant == 'fluent' {
@@ -1289,7 +1291,7 @@
 
         %textarea-group-label--focused {
             transform: translateY(0);
-            top: calc(#{$material-box-top-padding} / 4);
+            top: calc(#{$textarea-padding} / 4);
         }
 
         %textarea-group-label--filled--border,
@@ -1425,7 +1427,6 @@
     }
 
     %form-group-input--hover {
-        cursor: pointer;
         color: var-get($theme, 'filled-text-hover-color');
 
         &::placeholder {
@@ -1434,7 +1435,6 @@
     }
 
     %form-group-input--focus {
-        cursor: text;
         color: var-get($theme, 'focused-text-color');
 
         &::placeholder {
@@ -1465,9 +1465,10 @@
         resize: vertical;
         overflow: hidden;
         z-index: 1;
+        padding-block-end: $textarea-padding;
 
         @if $material-theme {
-            padding: 0;
+            padding-block-start: 0;
         }
     }
 
@@ -2023,14 +2024,14 @@
     }
 
     %indigo-textarea {
-        padding-block: $textarea-top-padding 0;
+        padding-block: $textarea-padding;
         padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
         inset-block-end: rem(2px);
     }
 
     %fluent-textarea {
         padding-inline: pad-inline(rem(8px));
-        padding-block: $textarea-top-padding 0;
+        padding-block: $textarea-padding;
     }
 
     %fluent-input-disabled {
@@ -2292,7 +2293,7 @@
         );
 
         &:is(textarea) {
-            padding-block: $textarea-top-padding 0;
+            padding-block: $textarea-padding;
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -15,6 +15,7 @@
 
     .igx-input-group {
         %igx-select__toggle-button {
+            cursor: pointer;
             background: var-get($theme, 'toggle-button-background');
             color: var-get($theme, 'toggle-button-foreground');
         }
@@ -60,4 +61,12 @@
             color: var-get($theme, 'toggle-button-foreground-disabled');
         }
     }
+
+    igx-select {
+        %form-group-input,
+        %form-group-prefix,
+        %form-group-suffix {
+            cursor: pointer;
+        }
+    }
 }

projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss

@@ -203,6 +203,7 @@
         font-size: rem(12px);
         height: $indicator-size;
         width: $indicator-size;
+        min-width: $indicator-size;
         white-space: nowrap;
         border-radius: var-get($theme, 'border-radius-indicator');
         color: var-get($theme, 'indicator-color');
@@ -349,6 +350,7 @@
 
     %igx-stepper__step-content-wrapper {
         margin-inline-start: $v-line-indent;
+        padding-inline-start: $v-line-indent;
         position: relative;
         min-height: if($variant == 'indigo', rem(24px), rem(32px));
 
@@ -363,23 +365,11 @@
         }
     }
 
-    [aria-selected='true'] {
-        %igx-stepper__step-content-wrapper {
-            padding-inline-start: $v-line-indent;
-        }
-    }
-
     @if $variant == 'indigo' {
-        [aria-selected='true'] {
-            %igx-stepper__step-content-wrapper {
-                padding-block: rem(16px);
-                padding-inline-end: rem(16px);
-            }
-        }
-
         [aria-selected='false'] {
             %igx-stepper__step-content-wrapper {
                 padding-block: 0;
+                transition: padding-block 0.3s 0.2s ease;
             }
         }
     }
@@ -633,10 +623,6 @@
 
         %igx-stepper__step--start,
         %igx-stepper__step--end {
-            %igx-stepper__step-indicator {
-                flex: 1 0 auto;
-            }
-
             %igx-stepper__step-header {
                 @if $variant != 'fluent' {
                     padding: calc(#{$step-header-padding} / 2);

projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss

@@ -52,7 +52,7 @@
     $text: map.get($categories, 'text');
 
     %igx-toast-display,
-    %igx-toast-display > * {
+    %igx-toast-display > *:not(igx-icon) {
         @include type-style($text) {
             margin: 0;
         }

projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss

@@ -966,7 +966,7 @@ describe('IgxDatePicker', () => {
                 },
                 element: {
                     nativeElement: jasmine.createSpyObj('mockElement',
-                        ['focus', 'blur', 'click', 'addEventListener', 'removeEventListener'])
+                        ['focus', 'blur', 'click', 'addEventListener', 'removeEventListener', 'querySelector'])
                 }
             } as any;
             mockInputDirective = {
@@ -1016,6 +1016,7 @@ describe('IgxDatePicker', () => {
             };
             datePicker = new IgxDatePickerComponent(elementRef, 'en-US', overlay, mockInjector, renderer2, null, mockCdr);
             (datePicker as any).inputGroup = mockInputGroup;
+            (mockInputGroup.element.nativeElement.querySelector as jasmine.Spy).and.returnValue(mockInputGroup.element.nativeElement);
             (datePicker as any).inputDirective = mockInputDirective;
             (datePicker as any).dateTimeEditor = mockDateEditor;
             (datePicker as any).viewContainerRef = viewsContainerRef;

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -451,7 +451,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     }
 
     private get inputGroupElement(): HTMLElement {
-        return this.inputGroup?.element.nativeElement;
+        return this.inputGroup?.element.nativeElement.querySelector('.igx-input-group__bundle');
     }
 
     private get dateValue(): Date {