Merge branch '19.2.x' into mkirova/fix-15768-19.2.x

Author: dkamburov

.github/workflows/nodejs.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [20.x, 22.17.1]
+        node-version: [20.x, 22.x]
 
     steps:
       - name: Checkout
@@ -51,7 +51,7 @@ jobs:
             npm run test:schematics
             npm run test:i18n
         env:
-            NODE_OPTIONS: --max_old_space_size=4096
+            NODE_OPTIONS: --max_old_space_size=4096 ${{ matrix.node-version == '22.x' && '--no-experimental-strip-types' || '' }}
             TZ: America/New_York
       - name: Build i18n & validate output
         run: |

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

@@ -1253,6 +1253,9 @@
     %grid-display-container-tr {
         width: 100%;
         overflow: visible;
+        flex: 1;
+        // needed to override the min-width of the column headers
+        min-width: 0;
     }
 
     %grid-mrl-block {
@@ -1450,7 +1453,7 @@
         }
 
         padding-block: 0;
-        flex: 1 0 auto;
+        flex: 0 0 auto;
         background: inherit;
         z-index: 4;
         cursor: move;

projects/igniteui-angular/src/lib/data-operations/sorting-strategy.spec.ts

@@ -24,34 +24,46 @@ describe('Unit testing SortingStrategy', () => {
                 strategy: DefaultSortingStrategy.instance()
             }]);
         expect(dataGenerator.getValuesForColumn(res, 'number'))
-                    .toEqual([4, 2, 0, 3, 1]);
+            .toEqual([4, 2, 0, 3, 1]);
     });
     it('tests `compareObjects`', () => {
         const strategy = DefaultSortingStrategy.instance();
         expect(strategy.compareValues(1, 0) === 1 &&
-                strategy.compareValues(true, false) === 1 &&
-                strategy.compareValues('bc', 'adfc') === 1)
+            strategy.compareValues(true, false) === 1 &&
+            strategy.compareValues('bc', 'adfc') === 1)
             .toBeTruthy('compare first argument greater than second');
         expect(strategy.compareValues(1, 2) === -1 &&
-                strategy.compareValues('a', 'b') === -1 &&
-                strategy.compareValues(false, true) === -1)
+            strategy.compareValues('a', 'b') === -1 &&
+            strategy.compareValues(false, true) === -1)
             .toBeTruthy('compare 0, 1');
         expect(strategy.compareValues(0, 0) === 0 &&
-                strategy.compareValues(true, true) === 0 &&
-                strategy.compareValues('test', 'test') === 0
-                )
+            strategy.compareValues(true, true) === 0 &&
+            strategy.compareValues('test', 'test') === 0
+        )
             .toBeTruthy('Comare equal variables');
     });
     it('tests default settings', () => {
         (data[4] as { string: string }).string = 'ROW';
         const res = sorting.sort(data, [{
-                dir: SortingDirection.Asc,
-                fieldName: 'string',
-                ignoreCase: true,
-                strategy: DefaultSortingStrategy.instance()
-            }]);
+            dir: SortingDirection.Asc,
+            fieldName: 'string',
+            ignoreCase: true,
+            strategy: DefaultSortingStrategy.instance()
+        }]);
         expect(dataGenerator.getValuesForColumn(res, 'number'))
-                    .toEqual([4, 0, 1, 2, 3]);
+            .toEqual([4, 0, 1, 2, 3]);
+    });
+
+    it('should not sort when sorting direction is None', () => {
+        const unsortedData = [{ number: 3 }, { number: 1 }, { number: 4 }, { number: 0 }, { number: 2 }];
+        const res = sorting.sort(unsortedData, [{
+            dir: SortingDirection.None,
+            fieldName: 'number',
+            ignoreCase: false,
+            strategy: DefaultSortingStrategy.instance()
+        }]);
+        expect(res.map(d => d.number))
+            .toEqual([3, 1, 4, 0, 2]);
     });
 
 });

projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.spec.ts

@@ -5,6 +5,7 @@ import { IgxFocusTrapDirective } from './focus-trap.directive';
 
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UIInteractions } from '../../test-utils/ui-interactions.spec';
+import { IgxTimePickerComponent } from '../../time-picker/time-picker.component';
 
 describe('igxFocusTrap', () => {
     beforeEach(waitForAsync(() => {
@@ -161,6 +162,39 @@ describe('igxFocusTrap', () => {
         fix.detectChanges();
         expect(document.activeElement).toEqual(button.nativeElement);
     }));
+
+    it('should focus only visible focusable elements on Tab key pressed', () => {
+        const fix = TestBed.createComponent(TrapFocusTestComponent);
+        fix.detectChanges();
+
+        fix.componentInstance.showTimePicker = true;
+        fix.detectChanges();
+
+        const focusTrap = fix.debugElement.query(By.directive(IgxFocusTrapDirective));
+        const buttons = fix.debugElement.queryAll(By.css('button'));
+        const inputs = fix.debugElement.queryAll(By.css('input'));
+        const timePickerInput = fix.debugElement.query(By.css('.igx-input-group__input'));
+
+        UIInteractions.triggerEventHandlerKeyDown('Tab', focusTrap);
+        fix.detectChanges();
+        expect(document.activeElement).toEqual(inputs[0].nativeElement);
+
+        UIInteractions.triggerEventHandlerKeyDown('Tab', focusTrap);
+        fix.detectChanges();
+        expect(document.activeElement).toEqual(inputs[1].nativeElement);
+
+        UIInteractions.triggerEventHandlerKeyDown('Tab', focusTrap);
+        fix.detectChanges();
+        expect(document.activeElement).toEqual(timePickerInput.nativeElement);
+
+        UIInteractions.triggerEventHandlerKeyDown('Tab', focusTrap);
+        fix.detectChanges();
+        expect(document.activeElement).toEqual(buttons[buttons.length - 1].nativeElement);
+
+        UIInteractions.triggerEventHandlerKeyDown('Tab', focusTrap);
+        fix.detectChanges();
+        expect(document.activeElement).toEqual(inputs[0].nativeElement);
+    });
 });
 
 
@@ -177,14 +211,19 @@ describe('igxFocusTrap', () => {
             <input type="password" placeholder="Enter Password" name="psw">
         }
         <br>
+        @if (showTimePicker) {
+            <igx-time-picker> </igx-time-picker>
+        }
+        <br>
         @if (showButton) {
             <button>SIGN IN</button>
         }
     </div>`,
-    imports: [IgxFocusTrapDirective]
+    imports: [IgxFocusTrapDirective, IgxTimePickerComponent]
 })
 class TrapFocusTestComponent {
     public showInput = true;
     public showButton = true;
     public focusTrap = true;
+    public showTimePicker = false;
 }

projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.ts

@@ -80,7 +80,7 @@ export class IgxFocusTrapDirective implements AfterViewInit, OnDestroy {
     private getFocusableElements(element: Element) {
         return Array.from(element.querySelectorAll(
             'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
-        )).filter(el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
+        )).filter(el => !el.hasAttribute('disabled') && !el.closest('[aria-hidden="true"]'));
     }
 
     private getFocusedElement(): HTMLElement | null {

projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts

@@ -908,6 +908,22 @@ describe('IgxInput', () => {
 
         expect(formControl.touched).toBe(true);
     }));
+
+    it('should update validity when control is marked as touched', fakeAsync(() => {
+        const fixture = TestBed.createComponent(ReactiveFormComponent);
+        fixture.detectChanges();
+
+        const component = fixture.componentInstance;
+        const igxInput = component.strIgxInput;
+
+        expect(igxInput.valid).toBe(IgxInputState.INITIAL);
+
+        component.markAllAsTouched();
+        tick();
+        fixture.detectChanges();
+
+        expect(igxInput.valid).toBe(IgxInputState.INVALID);
+    }));
 });
 
 @Component({
@@ -1201,6 +1217,12 @@ class ReactiveFormComponent {
         this.textareaControl.markAsTouched();
         this.textareaControl.updateValueAndValidity();
     }
+
+    public markAllAsTouched() {
+        if (!this.form.valid) {
+            this.form.markAllAsTouched();
+        }
+    }
 }
 
 @Component({

projects/igniteui-angular/src/lib/directives/input/input.directive.ts

@@ -16,9 +16,10 @@ import {
 import {
     AbstractControl,
     NgControl,
-    NgModel
+    NgModel,
+    TouchedChangeEvent
 } from '@angular/forms';
-import { Subscription } from 'rxjs';
+import { filter, Subscription } from 'rxjs';
 import { IgxInputGroupBase } from '../../input-group/input-group.common';
 
 const nativeValidationAttributes = [
@@ -100,6 +101,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
     private _valid = IgxInputState.INITIAL;
     private _statusChanges$: Subscription;
     private _valueChanges$: Subscription;
+    private _touchedChanges$: Subscription;
     private _fileNames: string;
     private _disabled = false;
 
@@ -313,6 +315,14 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
             this._valueChanges$ = this.ngControl.valueChanges.subscribe(
                 this.onValueChanged.bind(this)
             );
+
+            if (this.ngControl.control) {
+                this._touchedChanges$ = this.ngControl.control.events
+                    .pipe(filter(e => e instanceof TouchedChangeEvent))
+                    .subscribe(
+                        this.updateValidityState.bind(this)
+                    );
+            }
         }
 
         this.cdr.detectChanges();
@@ -326,6 +336,10 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
         if (this._valueChanges$) {
             this._valueChanges$.unsubscribe();
         }
+
+        if (this._touchedChanges$) {
+            this._touchedChanges$.unsubscribe();
+        }
     }
     /**
      * Sets a focus on the igxInput.

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1597,13 +1597,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         return !this.grid.isPinningToStart && pinnedCols[0] === this;
     }
 
-    /** @hidden @internal **/
-    public get rightPinnedOffset(): string {
-        return this.pinned && !this.grid.isPinningToStart ?
-            - this.grid.pinnedWidth - this.grid.headerFeaturesWidth + 'px' :
-            null;
-    }
-
     /** @hidden @internal **/
     public get gridRowSpan(): number {
         return this.rowEnd && this.rowStart ? this.rowEnd - this.rowStart : 1;

projects/igniteui-angular/src/lib/grids/common/strategy.ts

@@ -5,7 +5,7 @@ import { IGroupingState } from '../../data-operations/groupby-state.interface';
 import { IGroupingExpression } from '../../data-operations/grouping-expression.interface';
 import { IGroupByResult } from '../../data-operations/grouping-result.interface';
 import { getHierarchy, isHierarchyMatch } from '../../data-operations/operations';
-import { DefaultSortingStrategy, ISortingExpression } from '../../data-operations/sorting-strategy';
+import { DefaultSortingStrategy, ISortingExpression, SortingDirection } from '../../data-operations/sorting-strategy';
 import { GridType } from './grid.interface';
 
 const DATE_TYPE = 'date';
@@ -229,7 +229,11 @@ export class IgxSorting implements IGridSortingStrategy {
         const isDate = column?.dataType === DATE_TYPE || column?.dataType === DATE_TIME_TYPE;
         const isTime = column?.dataType === TIME_TYPE || column?.dataType === DATE_TIME_TYPE;
         const isString = column?.dataType === STRING_TYPE;
-        data = expr.strategy.sort(data, expr.fieldName, expr.dir, expr.ignoreCase, this.getFieldValue, isDate, isTime, grid);
+        if (expr.dir === SortingDirection.None) {
+            data = this.sortDataRecursive(data, expressions, expressionIndex + 1, grid);
+        } else {
+            data = expr.strategy.sort(data, expr.fieldName, expr.dir, expr.ignoreCase, this.getFieldValue, isDate, isTime, grid);
+        }
         if (expressionIndex === exprsLen - 1) {
             return data;
         }

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html

@@ -7,8 +7,8 @@
         [igxDropDownItemNavigation]="subMenu"
         role="menuitem"
         aria-haspopup="true"
-        [attr.aria-controls]="this.subMenu?.listId"
-        [attr.aria-activedescendant]="!this.subMenu?.collapsed ? this.subMenu?.focusedItem?.id : null">
+        [attr.aria-controls]="subMenu?.listId"
+        [attr.aria-activedescendant]="!subMenu?.collapsed ? subMenu?.focusedItem?.id : null">
         <span class="igx-excel-filter__filter-number">
             {{ subMenuText }}
             @if (filterNumber > 0) { ({{filterNumber}}) }