Merge branch '20.1.x' into mkirova/fix-16850-20.1.x

Author: dkamburov

.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 }}

.github/workflows/trigger-licensed-release.yml

@@ -0,0 +1,39 @@
+name: Trigger Licensed Release
+
+permissions:
+  contents: read
+
+on:
+  release:
+    types: [created]
+  workflow_dispatch:
+    inputs:
+      release_tag:
+        description: 'Release tag to dispatch (e.g. 21.1.1)'
+        required: true
+        type: string
+
+jobs:
+  dispatch-to-private-repo:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Get app token
+        id: app-token
+        uses: actions/create-github-app-token@v2
+        with:
+          app-id: ${{ secrets.IGNITEUI_GITHUB_APP_ID }}
+          private-key: ${{ secrets.IGNITEUI_GITHUB_APP_PRIVATE_KEY }}
+          owner: IgniteUI
+
+      - name: Send repository dispatch to private repo
+        uses: peter-evans/repository-dispatch@ff45666b9427631e3450c54a1bcbee4d9ff4d7c0 # v3
+        with:
+          token: ${{ steps.app-token.outputs.token }}
+          repository: IgniteUI/igniteui-actions
+          event-type: igniteui-angular-public-release-created
+          client-payload: |
+            {
+              "release_tag": "${{ github.event_name == 'workflow_dispatch' && inputs.release_tag || github.event.release.tag_name }}",
+              "public_repo": "${{ github.repository }}"
+            }

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

@@ -184,6 +184,8 @@
         }
 
         %igx-combo__clear-button {
+            cursor: pointer;
+
             @if $variant == 'bootstrap' {
                 border-inline-end: rem(1px) solid var(--border-color);
             }

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

@@ -366,16 +366,10 @@
     }
 
     @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;
             }
         }
     }

projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-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 {

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

@@ -1965,10 +1965,11 @@ describe('IgxDateRangePicker', () => {
                 fixture.detectChanges();
 
                 const overlayContent = document.getElementsByClassName(CSS_CLASS_OVERLAY_CONTENT)[0] as HTMLElement;
+                const expectedTarget = dateRange.element.nativeElement.querySelector('.igx-input-group__bundle');
                 expect(AutoPositionStrategy.prototype.position).toHaveBeenCalledTimes(1);
                 expect(AutoPositionStrategy.prototype.position)
                     .toHaveBeenCalledWith(overlayContent, jasmine.anything(), document,
-                        jasmine.anything(), dateRange.element.nativeElement);
+                        jasmine.anything(), expectedTarget);
             }));
             it('Should the weekStart property takes precedence over locale.', fakeAsync(() => {
                 fixture = TestBed.createComponent(DateRangeCustomComponent);

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

@@ -1223,10 +1223,15 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     private configPositionStrategy(): void {
         this._positionSettings = {
             openAnimation: fadeIn,
-            closeAnimation: fadeOut
+            closeAnimation: fadeOut,
+            offset: 1
         };
         this._dropDownOverlaySettings.positionStrategy = new AutoPositionStrategy(this._positionSettings);
-        this._dropDownOverlaySettings.target = this.element.nativeElement;
+
+        const bundle = this.hasProjectedInputs
+            ? this.projectedInputs.first?.nativeElement.querySelector('.igx-input-group__bundle')
+            : this.element.nativeElement.querySelector('.igx-input-group__bundle');
+        this._dropDownOverlaySettings.target = bundle || this.element.nativeElement;
     }
 
     private configOverlaySettings(): void {