Merge branch 'master' into dmdimitrov/query-builder-improvements

Author: igdmdimitrov

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

@@ -1202,15 +1202,15 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
         this.searchValue = '';
         if (!e.event) {
             this.comboInput?.nativeElement.focus();
+        } else {
+            this._onTouchedCallback();
+            this.updateValidity();
         }
     }
 
     /** @hidden @internal */
     public handleClosed() {
         this.closed.emit({ owner: this });
-        if(this.comboInput.nativeElement !== this.document.activeElement){
-            this.validateComboState();
-        }
     }
 
     /** @hidden @internal */
@@ -1250,15 +1250,10 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
     public onBlur() {
         if (this.collapsed) {
             this._onTouchedCallback();
-            this.validateComboState();
+            this.updateValidity();
         }
     }
 
-    /** @hidden @internal */
-    public onFocus(): void {
-        this._onTouchedCallback();
-    }
-
     /** @hidden @internal */
     public setActiveDescendant(): void {
         this.activeDescendant = this.dropdown.focusedItem?.id || '';
@@ -1283,7 +1278,7 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
         this.manageRequiredAsterisk();
     };
 
-    private validateComboState() {
+    private updateValidity() {
         if (this.ngControl && this.ngControl.invalid) {
             this.valid = IgxInputState.INVALID;
         } else {

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

@@ -13,8 +13,7 @@
             role="combobox" aria-haspopup="listbox"
             [attr.aria-expanded]="!dropdown.collapsed" [attr.aria-controls]="dropdown.listId"
             [attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder"
-            (blur)="onBlur()"
-            (focus)="onFocus()" />
+            (blur)="onBlur()" />
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
     </ng-container>

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

@@ -3615,7 +3615,7 @@ describe('igxCombo', () => {
                     combo.open();
                     input.triggerEventHandler('focus', {});
                     fixture.detectChanges();
-                    expect(ngModel.touched).toBeTrue();
+                    expect(ngModel.touched).toBeFalse();
                     combo.searchInput.nativeElement.focus();
                     fixture.detectChanges();
                     const documentClickEvent = new MouseEvent('click', { bubbles: true });

projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -252,20 +252,6 @@
         flex: 0 0 auto;
         background: var-get($theme, 'item-background');
         z-index: 1;
-
-        @if $indigo-theme {
-            [igxIconButton='flat'].igx-button--focused {
-                box-shadow: none;
-
-                &::after {
-                    border: rem(3px) solid var(--nav-btn-border-color);
-
-                    @if $theme-variant == 'dark' {
-                        border-color: contrast-color($color: 'gray', $variant: 50, $opacity: .2);
-                    }
-                }
-            }
-        }
     }
 
     %tabs-header-content {

projects/igniteui-angular/src/lib/data-operations/filtering-expressions-tree.ts

@@ -22,15 +22,17 @@ export declare interface IFilteringExpressionsTree extends IBaseEventArgs, IExpr
     /* alternateName: treeType */
     type?: FilteringExpressionsTreeType;
 
+    /* blazorSuppress */
     /**
      * @deprecated in version 18.2.0. Use `ExpressionsTreeUtil.find` instead.
      */
-    find(fieldName: string): IFilteringExpressionsTree | IFilteringExpression;
+    find?: (fieldName: string) => IFilteringExpressionsTree | IFilteringExpression;
 
+    /* blazorSuppress */
     /**
      * @deprecated in version 18.2.0. Use `ExpressionsTreeUtil.findIndex` instead.
      */
-    findIndex(fieldName: string): number;
+    findIndex?: (fieldName: string) => number;
 }
 
 /* marshalByValue */
@@ -142,6 +144,7 @@ export class FilteringExpressionsTree implements IFilteringExpressionsTree {
         return !expressionTree || !expressionTree.filteringOperands || !expressionTree.filteringOperands.length;
     }
 
+    /* blazorSuppress */
     /**
      * Returns the filtering expression for a column with the provided fieldName.
      * ```typescript
@@ -155,6 +158,7 @@ export class FilteringExpressionsTree implements IFilteringExpressionsTree {
         return ExpressionsTreeUtil.find(this, fieldName);
     }
 
+    /* blazorSuppress */
     /**
      * Returns the index of the filtering expression for a column with the provided fieldName.
      * ```typescript

projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts

@@ -69,10 +69,10 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
                 return;
             }
             const targetElem = this.parentElement;
-            targetElem.addEventListener('wheel', this.onWheel.bind(this));
-            targetElem.addEventListener('touchstart', this.onTouchStart.bind(this));
-            targetElem.addEventListener('touchmove', this.onTouchMove.bind(this));
-            targetElem.addEventListener('touchend', this.onTouchEnd.bind(this));
+            targetElem.addEventListener('wheel', this.onWheel.bind(this), { passive: false });
+            targetElem.addEventListener('touchstart', this.onTouchStart.bind(this), { passive: false });
+            targetElem.addEventListener('touchmove', this.onTouchMove.bind(this), { passive: false });
+            targetElem.addEventListener('touchend', this.onTouchEnd.bind(this), { passive: false });
         });
     }
 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts

@@ -221,13 +221,13 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
 
     /**
      * Gets the minimum height.
-     * 
-     * Setting value in template: 
+     *
+     * Setting value in template:
      * ```ts
-     * [minHeight]="'<number><unit (px|rem|etc..)>'" 
+     * [minHeight]="'<number><unit (px|rem|etc..)>'"
      * ```
-     * 
-     * Example for setting a value: 
+     *
+     * Example for setting a value:
      * ```ts
      * [minHeight]="'700px'"
      * ```
@@ -258,13 +258,13 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
 
     /**
      * Gets the maximum height.
-     * 
-     * Setting value in template: 
+     *
+     * Setting value in template:
      * ```ts
-     * [maxHeight]="'<number><unit (px|rem|etc..)>'" 
+     * [maxHeight]="'<number><unit (px|rem|etc..)>'"
      * ```
-     * 
-     * Example for setting a value: 
+     *
+     * Example for setting a value:
      * ```ts
      * [maxHeight]="'700px'"
      * ```
@@ -509,6 +509,11 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
     private renderValues() {
         this.filterValues = this.generateFilterValues();
         this.generateListData();
+        this.expressionsList.forEach(expr => {
+            if (this.column.dataType === GridColumnDataType.String && this.column.filteringIgnoreCase && expr.expression.searchVal) {
+                this.modifyExpression(expr);
+            }
+        });
     }
 
     private generateFilterValues() {
@@ -539,6 +544,16 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
         return filterValues;
     }
 
+    private modifyExpression(expr: ExpressionUI) {
+        const lowerCaseFilterValues = new Set(Array.from(expr.expression.searchVal).map((value: string) => value.toLowerCase()));
+
+        this.grid.data.forEach(item => {
+            if (lowerCaseFilterValues.has(item[this.column.field]?.toLowerCase())) {
+                expr.expression.searchVal.add(item[this.column.field]);
+            }
+        });
+    }
+
     private generateListData() {
         this.listData = new Array<FilterListItem>();
         const shouldUpdateSelection = this.areExpressionsSelectable();

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -2277,9 +2277,6 @@ export abstract class IgxGridBaseDirective implements GridType,
             this._allowFiltering = value;
             this.filteringService.registerSVGIcons();
 
-            if (!this._init) {
-                this.calcGridHeadRow();
-            }
 
             this.filteringService.isFilterRowVisible = false;
             this.filteringService.filteredColumn = null;
@@ -6859,25 +6856,11 @@ export abstract class IgxGridBaseDirective implements GridType,
         }
     }
 
-    /**
-     * @hidden
-     * @internal
-     */
-    protected calcGridHeadRow() {
-        if (this.maxLevelHeaderDepth) {
-            this._baseFontSize = parseFloat(getComputedStyle(this.document.documentElement).getPropertyValue('font-size'));
-            const hasFilterRow = this._allowFiltering && this._filterMode === FilterMode.quickFilter;
-            const minSize = (this.maxLevelHeaderDepth + 1 + (hasFilterRow ? 1 : 0)) * this.defaultRowHeight / this._baseFontSize;
-            this.theadRow.nativeElement.style.minHeight = `${minSize}rem`;
-        }
-    }
-
     /**
      * @hidden
      * Sets TBODY height i.e. this.calcHeight
      */
     protected calculateGridHeight() {
-        this.calcGridHeadRow();
 
         this.calcHeight = this._calculateGridBodyHeight();
         if (this.pinnedRowHeight && this.calcHeight) {
@@ -7805,7 +7788,7 @@ export abstract class IgxGridBaseDirective implements GridType,
             } else {
                 this._shouldRecalcRowHeight = true;
             }
-        }
+        } 
     }
 
     // TODO: About to Move to CRUD

projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts

@@ -67,6 +67,19 @@ describe('IgxGrid - multi-column headers #grid', () => {
             expect(grid.getColumnByName('ContactName').level).toEqual(expectedLevel);
         });
 
+        it('should initialize a grid with correct header height', () => {
+            fixture = TestBed.createComponent(ColumnGroupTestComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+
+            const expectedGridHeaderHeight = 151;
+            const headerHeight = grid.nativeElement
+            .querySelector("igx-grid-header-row")
+            .getBoundingClientRect().height;
+            
+            expect(Math.round(headerHeight)).toEqual(expectedGridHeaderHeight);
+        });
+
         it('Should render column group headers correctly.', fakeAsync(() => {
             fixture = TestBed.createComponent(BlueWhaleGridComponent);
             fixture.detectChanges();

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -2759,6 +2759,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
 
                 GridFunctions.clickFilterCellChip(fix, 'AnotherField');
                 fix.detectChanges();
+                grid.cdr.detectChanges();
 
                 // check if it is positioned at the bottom of the thead.
                 const theadWrapper = grid.theadRow.nativeElement.firstElementChild;
@@ -5841,6 +5842,32 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(gridCellValues).toEqual(listItems);
         }));
 
+        it('Should filter grid correctly with case insensitive duplicates', fakeAsync(() => {
+            grid.data = SampleTestData.excelFilteringDataDuplicateValues();
+            fix.detectChanges();
+            // Open excel style custom filtering dialog.
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'AnotherField');
+
+            // Type string in search box.
+            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
+            const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent);
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, 'cust', fix);
+            tick(100);
+            fix.detectChanges();
+
+            // Click 'apply' button to apply filter.
+            GridFunctions.clickApplyExcelStyleFiltering(fix);
+            tick(100);
+            fix.detectChanges();
+
+            // Get the results and verify their count.
+            const gridCellValues = GridFunctions.getColumnCells(fix, 'AnotherField')
+                .map(c => c.nativeElement.innerText)
+                .sort();
+
+            expect(gridCellValues.length).toEqual(5);
+        }));
+
         it('Should disable the apply button when there are no results.', fakeAsync(() => {
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');