Merge branch '20.1.x' into iminchev/fix-16943-20.1.x

Author: ChronosSF

.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/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1268,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/stepper/_stepper-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/grids/columns/column.component.ts

@@ -2223,7 +2223,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
                 result.push(size.width + 'px');
             } else {
                 const currentWidth = parseFloat(this.grid.getPossibleColumnWidth());
-                result.push((this.getConstrainedSizePx(currentWidth)) + 'px');
+                const target = size && size.ref ? size.ref : this;
+                result.push((target as IgxColumnComponent).getConstrainedSizePx(currentWidth) + 'px');
             }
         }
         return result;
@@ -2716,7 +2717,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         } else if (this.minWidth && newSize <= this.userSetMinWidthPx) {
             this.widthConstrained = true;
             return this.userSetMinWidthPx;
-        } else if (!this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) {
+        } else if (!this.columnGroup && !this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) {
             return this.grid.minColumnWidth;
         } else {
             this.widthConstrained = false;

projects/igniteui-angular/src/lib/grids/grid/grid-collapsible-columns.spec.ts

@@ -4,7 +4,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
     CollapsibleColumnGroupTestComponent,
     CollapsibleGroupsTemplatesTestComponent,
-    CollapsibleGroupsDynamicColComponent
+    CollapsibleGroupsDynamicColComponent,
+    CollapsibleGroupWithExplicitChildWidthsComponent
 } from '../../test-utils/grid-samples.spec';
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
@@ -28,7 +29,8 @@ describe('IgxGrid - multi-column headers #grid', () => {
                 NoopAnimationsModule,
                 CollapsibleColumnGroupTestComponent,
                 CollapsibleGroupsTemplatesTestComponent,
-                CollapsibleGroupsDynamicColComponent
+                CollapsibleGroupsDynamicColComponent,
+                CollapsibleGroupWithExplicitChildWidthsComponent
             ]
         }).compileComponents();
     }));
@@ -617,6 +619,28 @@ describe('IgxGrid - multi-column headers #grid', () => {
             expect(spans.length).toBe(2);
         });
 
+        it('should not constrain collapsed column group width by default min width when children have explicit widths (#17042)', () => {
+            const fix = TestBed.createComponent(CollapsibleGroupWithExplicitChildWidthsComponent);
+            fix.detectChanges();
+            const g: IgxGridComponent = fix.componentInstance.grid;
+
+            const customerInfoGroup = GridFunctions.getColGroup(g, 'Customer Information');
+            expect(customerInfoGroup.expanded).toBe(false);
+            expect(customerInfoGroup.collapsible).toBe(true);
+
+            // The only visible child when collapsed is CompanyName with width 100px.
+            const visibleChildren = customerInfoGroup.children
+                .filter(c => !c.hidden);
+            expect(visibleChildren.length).toBe(1);
+
+            const visibleChildWidth = visibleChildren
+                .reduce((sum, c) => sum + c.calcPixelWidth, 0);
+
+            const groupWidth = customerInfoGroup.calcPixelWidth;
+            expect(groupWidth).toBe(visibleChildWidth);
+            expect(groupWidth).toBe(100);
+        });
+
         it('Group By: test when group by a column', () => {
             addressInf.expanded = false;
             countryCol.visibleWhenCollapsed = false;

projects/igniteui-angular/src/lib/paginator/paginator.component.spec.ts

@@ -231,6 +231,55 @@ describe('IgxPaginator with default settings', () => {
         expect(totalPages.innerText).toBe('1');
     });
 
+    it('should display the pager text ("of") in page navigation', () => {
+        const fix = TestBed.createComponent(DefaultPaginatorComponent);
+        fix.detectChanges();
+
+        const pageNavTextDiv = fix.debugElement.query(By.css('.igx-page-nav__text')).nativeElement;
+        const spans = pageNavTextDiv.querySelectorAll('span');
+        const paginator = fix.componentInstance.paginator;
+
+        // Should have 3 spans: current page, "of" text, total pages
+        expect(spans.length).toBe(3);
+
+        // Check current page
+        expect(spans[0].innerText.trim()).toBe('1');
+
+        // Check the "of" text
+        expect(spans[1].innerText.trim()).toBe('of');
+
+        // Check total pages
+        expect(spans[2].innerText.trim()).toBe('3');
+
+        // Verify the resource string is set
+        expect(paginator.resourceStrings.igx_paginator_pager_text).toBe('of');
+    });
+
+    it('should preserve default resource strings when partial resourceStrings are provided', () => {
+        const fix = TestBed.createComponent(DefaultPaginatorComponent);
+        fix.detectChanges();
+
+        const paginator = fix.componentInstance.paginator;
+
+        // Set only a partial resource string (only override label)
+        paginator.resourceStrings = { igx_paginator_label: 'Custom per page' };
+        fix.detectChanges();
+
+        const pageNavTextDiv = fix.debugElement.query(By.css('.igx-page-nav__text')).nativeElement;
+        const spans = pageNavTextDiv.querySelectorAll('span');
+
+        // Verify the custom label is set
+        expect(paginator.resourceStrings.igx_paginator_label).toBe('Custom per page');
+
+        // Verify the pager text ("of") is still present from defaults
+        expect(paginator.resourceStrings.igx_paginator_pager_text).toBe('of');
+        expect(spans[1].innerText.trim()).toBe('of');
+
+        // Verify other default strings are also preserved
+        expect(paginator.resourceStrings.igx_paginator_first_page_button_text).toBe('Go to first page');
+        expect(paginator.resourceStrings.igx_paginator_next_page_button_text).toBe('Next page');
+    });
+
 });
 
 describe('IgxPaginator with custom settings', () => {

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

@@ -250,7 +250,7 @@ export class IgxPaginatorComponent implements IgxPaginatorToken {
      */
     @Input()
     public set resourceStrings(value: IPaginatorResourceStrings) {
-        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+        this._resourceStrings = Object.assign({}, this.resourceStrings, value);
     }
 
     /**

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -2812,3 +2812,26 @@ export class IgxGridRowEditingDefinedColumnsComponent extends BasicGridComponent
 })
 export class IgxGridConditionalFilteringComponent extends IgxGridFilteringComponent {
 }
+
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" height="500px" width="600px">
+        <igx-column-group header="Customer Information" [collapsible]="true" [expanded]="false">
+            <igx-column field="CompanyName" width="100px" [visibleWhenCollapsed]="true"></igx-column>
+            <igx-column field="ContactName" width="100px" [visibleWhenCollapsed]="false"></igx-column>
+            <igx-column field="ContactTitle" width="100px" [visibleWhenCollapsed]="false"></igx-column>
+        </igx-column-group>
+        <igx-column field="ID" width="200px"></igx-column>
+        <igx-column field="Address" width="200px"></igx-column>
+        <igx-column field="City" width="200px"></igx-column>
+        <igx-column field="Country" width="200px"></igx-column>
+        <igx-column field="Phone" width="200px"></igx-column>
+    </igx-grid>
+    `,
+    imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent]
+})
+export class CollapsibleGroupWithExplicitChildWidthsComponent {
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+    public data = SampleTestData.contactInfoDataFull();
+}