Merge branch 'master' into mdragnev/combo-itemheight

kdinev · web-flow · commit 3441bf3d9a6e · 2025-01-14T10:29:40.000+02:00
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
@@ -35,11 +35,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -50,7 +50,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -64,4 +64,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v3
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
@@ -175,6 +175,7 @@
         flex-flow: row nowrap;
         align-items: center;
         outline-style: none;
+        cursor: pointer;
     }
 
     %cbx-display--disabled {
@@ -211,7 +212,6 @@
     %cbx-composite {
         position: relative;
         display: inline-block;
-        cursor: pointer;
         width: $size;
         height: $size;
         min-width: $size;
@@ -500,7 +500,6 @@
     %cbx-label {
         display: inline-block;
         color: var-get($theme, 'label-color');
-        cursor: pointer;
         user-select: none;
         word-wrap: break-all;
         transition: color .2s $ease-out-quad;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
@@ -384,7 +384,7 @@
         }
 
         @if $variant == 'indigo' {
-            %igx-icon-display {
+            igx-icon {
                 --size: #{sizable(rem(14px), rem(14px), rem(16px))}
             }
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
@@ -174,14 +174,14 @@
     // The wrapping element here is needed
     // in order to override the !important rule of .igx-icon--inactive.
     %igx-combo__case-icon {
-        .igx-icon {
+        igx-icon {
             // Important is needed since the .igx-icon--inactive has !important
             color: color($color: 'gray', $variant: 600) !important;
         }
     }
 
     %igx-combo__case-icon--active {
-        .igx-icon {
+        igx-icon {
             color: color($color: 'primary')
         }
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
@@ -99,13 +99,9 @@
             }
         }
 
-        igx-icon {
-            @if $variant == 'indigo' {
-                --component-size: 2;
-            } @else {
-                width: var(--igx-icon-size, #{rem(15px)});
-                height: var(--igx-icon-size, #{rem(15px)});
-                font-size: var(--igx-icon-size, #{rem(15px)});
+        @if $variant != 'indigo' {
+            igx-icon {
+                --size: var(--igx-icon-size, #{rem(15px)});
             }
         }
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -1204,7 +1204,7 @@
         } @else {
             padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
 
-            %igx-icon-display {
+            igx-icon {
                 opacity: if($theme-variant == 'light', .75, .85);
 
                 &:hover {
@@ -1458,12 +1458,12 @@
         } @else {
             padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
 
-            %igx-icon-display {
+            igx-icon {
                 opacity: if($theme-variant == 'light', .75, .85);
             }
 
             &:hover {
-                %igx-icon-display {
+                igx-icon {
                     opacity: 1;
                 }
             }
@@ -2035,13 +2035,10 @@
             position: relative;
             display: flex;
 
-            igx-icon {
-                @if $variant == 'indigo' {
-                    --component-size: 2;
-                } @else {
-                    width: var(--igx-icon-size, #{rem(15px)});
-                    height: var(--igx-icon-size, #{rem(15px)});
-                    font-size: var(--igx-icon-size, #{rem(15px)});
+
+            @if $variant != 'indigo' {
+                igx-icon {
+                    --size: var(--igx-icon-size, #{rem(15px)});
                 }
             }
 
@@ -2147,15 +2144,15 @@
             %grid-excel-icon {
                 color: var-get($theme, 'header-selected-text-color');
 
-                %igx-icon-display {
+                igx-icon {
                     color: var-get($theme, 'header-selected-text-color');
                 }
 
                 &:focus,
                 &:hover {
                     color: var-get($theme, 'header-selected-text-color');
 
-                    %igx-icon-display {
+                    igx-icon {
                         color: var-get($theme, 'header-selected-text-color');
                     }
                 }
@@ -2499,7 +2496,7 @@
     }
 
     %igx-group-label__icon {
-        &.igx-icon {
+        @at-root igx-icon#{&} {
             --component-size: #{if($variant == 'indigo', 2, 1)};
 
             color: var-get($theme, 'group-label-icon');
@@ -3447,10 +3444,9 @@
             }
 
             @if $variant == 'indigo' {
-                %igx-icon-display {
+                igx-icon {
                     opacity: if($theme-variant == 'light', .75, .85);
 
-
                     &:hover {
                         opacity: 1;
                         cursor: pointer;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
@@ -212,7 +212,6 @@
         height: $size;
         min-width: $size;
         line-height: $size;
-        cursor: pointer;
         color: var-get($theme, 'label-color');
         user-select: none;
 
@@ -400,7 +399,6 @@
 
     %radio-label {
         color: var-get($theme, 'label-color');
-        cursor: pointer;
         user-select: none;
         word-wrap: break-all;
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss
@@ -290,7 +290,6 @@
         border: rem(1px) solid var-get($theme, 'border-color');
         border-radius: var-get($theme, 'border-radius-track');
         background: var-get($theme, 'track-off-color');
-        cursor: pointer;
         user-select: none;
         transition: $input-transition;
 
@@ -557,7 +556,6 @@
     %switch-label {
         display: inline-block;
         color: var-get($theme, 'label-color');
-        cursor: pointer;
         user-select: none;
         word-wrap: break-all;
 
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts
@@ -136,6 +136,7 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {
 
     public onClearButtonClick() {
         this.filteringService.clearFilter(this.column.field);
+        this.selectedOperator = null;
         this.createInitialExpressionUIElement();
         this.cdr.detectChanges();
     }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts
@@ -509,7 +509,8 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
         this.filterValues = this.generateFilterValues();
         this.generateListData();
         this.expressionsList.forEach(expr => {
-            if (this.column.dataType === GridColumnDataType.String && this.column.filteringIgnoreCase && expr.expression.searchVal) {
+            if (this.column.dataType === GridColumnDataType.String && this.column.filteringIgnoreCase
+                && expr.expression.searchVal && expr.expression.searchVal instanceof Set) {
                 this.modifyExpression(expr);
             }
         });
diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts
@@ -16,6 +16,7 @@ import { IgxAvatarComponent } from '../../avatar/avatar.component';
 import { IColumnResizeEventArgs, IgxColumnComponent } from '../public_api';
 import { Size } from "../common/enums";
 import { setElementSize } from '../../test-utils/helper-utils.spec';
+import { IgxColumnResizerDirective } from '../resizing/resizer.directive';
 
 describe('IgxGrid - Deferred Column Resizing #grid', () => {
 
@@ -133,6 +134,27 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
             expect(grid.columnList.get(1).width).toEqual('70px');
         }));
 
+        it('should calculate correctly resizer position and column width when grid is scaled and zoomed', fakeAsync(() => {
+            grid.nativeElement.style.transform = 'scale(1.2)';
+            grid.nativeElement.style.setProperty('zoom', '1.05');
+            fixture.detectChanges();
+            headerResArea = GridFunctions.getHeaderResizeArea(headers[1]).nativeElement;
+            UIInteractions.simulateMouseEvent('mousedown', headerResArea, 153, 0);
+            tick(200);
+            fixture.detectChanges();
+
+            const resizer = GridFunctions.getResizer(fixture);
+            const resizerDirective = resizer.componentInstance.resizer as IgxColumnResizerDirective;
+            const leftSetterSpy = spyOnProperty(resizerDirective, 'left', 'set').and.callThrough();
+            UIInteractions.simulateMouseEvent('mousemove', resizer.nativeElement, 200, 5);
+            UIInteractions.simulateMouseEvent('mouseup', resizer.nativeElement, 200, 5);
+            fixture.detectChanges();
+
+            expect(leftSetterSpy).toHaveBeenCalled();
+            expect(parseInt(leftSetterSpy.calls.mostRecent().args[0].toFixed(0))).toEqual(200);
+            expect(parseInt(grid.columnList.get(1).headerCell.nativeElement.getBoundingClientRect().width.toFixed(0))).toEqual(173);
+        }));
+
         it('should be able to resize column to the minWidth < defaultMinWidth', fakeAsync(() => {
             const column = grid.getColumnByName('ID');
             column.minWidth = 'a';
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -6273,6 +6273,41 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
                 ['Select All', '1:00:00 AM', '12:00:00 PM', '11:00:00 PM'],
                 [true, true, true, true]);
         }));
+
+        it('should clear all filters in the custom dialog when clicking "Clear Filter" button', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
+            tick(100);
+            fix.detectChanges();
+
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 5);
+            tick();
+            fix.detectChanges();
+
+            const expressions = GridFunctions.getExcelCustomFilteringDateExpressions(fix);
+            const lastExpression = expressions[expressions.length - 1];
+            (lastExpression.querySelector('igx-select').querySelector('igx-input-group') as HTMLElement).click();
+            tick();
+            fix.detectChanges();
+            const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle'));
+ 
+            const todayItem = dropdownList.children[0].children.find(item => item.nativeElement?.innerText === 'Today');
+            todayItem.nativeElement.click();
+            tick();
+            fix.detectChanges();
+            
+            GridFunctions.clickClearFilterExcelStyleCustomFiltering(fix);
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.getExcelCustomFilteringDateExpressions(fix).forEach(expr => {
+                const input = expr.children[0].querySelector('input');
+                expect(input.value).toBe('');
+            });
+        }));
     });
 
     describe('Templates: ', () => {
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts
@@ -207,6 +207,7 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect
         const columns = [];
         const topLevelCols = cols.filter(c => c.level === 0);
         topLevelCols.forEach((col) => {
+            col.grid = this;
             const ref = this._createColumn(col);
             ref.changeDetectorRef.detectChanges();
             columns.push(ref.instance);
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts
@@ -1069,6 +1069,23 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
             expect(hierarchicalGrid.childLayoutList.first.columns.length).toEqual(0, 'Columns length should be 0 after toggle');
             expect(hierarchicalGrid.childLayoutList.first.columnList.length).toEqual(0, 'ColumnList length should be 0 after toggle');
         }));
+
+        it('should resolve child grid cols default editable prop correctly based on row island\'s rowEditable.', () => {
+            hierarchicalGrid.rowEditable = false;
+            hierarchicalGrid.childLayoutList.first.rowEditable = true;
+            fixture.detectChanges();
+            // expand row
+            const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            UIInteractions.simulateClickAndSelectEvent(row.expander);
+            fixture.detectChanges();
+
+            //check child grid column are editable
+            const childGrids =  fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
+            const childGrid1 = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
+
+            expect(childGrid1.columns[0].editable).toBeTrue();
+            expect(childGrid1.columns[1].editable).toBeTrue();
+        });
     });
 
     describe('IgxHierarchicalGrid Children Sizing #hGrid', () => {
diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.html b/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.html
@@ -4,5 +4,5 @@
     [restrictHResizeMax]="colResizingService.restrictResizeMax"
     [restrictHResizeMin]="colResizingService.restrictResizeMin"
     [restrictResizerTop]="restrictResizerTop"
-    (resizeEnd)="colResizingService.resizeColumn($event)">
+    (resizeEnd)="colResizingService.resizeColumn($event, resizer.ratio)">
 </div>
diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts
@@ -41,8 +41,13 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
     @Output() public resize = new Subject<any>();
 
     private _left: number;
+    private _ratio: number = 1;
     private _destroy = new Subject<boolean>();
 
+    public get ratio(): number {
+        return this._ratio;
+    }
+
     constructor(
         public element: ElementRef<HTMLElement>,
         @Inject(DOCUMENT) public document,
@@ -56,7 +61,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
                 .pipe(
                     takeUntil(this._destroy),
                     takeUntil<MouseEvent>(this.resizeEnd),
-                    map((event) => event.clientX - offset),
+                    map((event) => (event.clientX - offset) / (this._ratio)),
                 ))
         )
             .subscribe((pos) => {
@@ -113,8 +118,12 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
     public onMousedown(event: MouseEvent) {
         event.preventDefault();
         const parent = this.element.nativeElement.parentElement.parentElement;
-
-        this.left = this._left = event.clientX - parent.getBoundingClientRect().left;
+        const parentRectWidth = parent.getBoundingClientRect().width;
+        const parentComputedWidth = parseFloat(window.getComputedStyle(parent).width);
+        if (Math.abs(parentRectWidth - parentComputedWidth) > 1) {
+            this._ratio = parentRectWidth / parentComputedWidth;
+        }
+        this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / this._ratio;
         this.top = (event.target as HTMLElement).getBoundingClientRect().top - parent.getBoundingClientRect().top;
 
         this.resizeStart.next(event);
diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts

Original file line number	Diff line number	Diff line change
`@@ -384,7 +384,7 @@`
`384`	`384`	`}`
`385`	`385`
`386`	`386`	`@if $variant == 'indigo' {`
`387`		`- %igx-icon-display {`
	`387`	`+ igx-icon {`
`388`	`388`	`--size: #{sizable(rem(14px), rem(14px), rem(16px))}`
`389`	`389`	`}`
`390`	`390`	`}`
Original file line number	Diff line number	Diff line change
`@@ -174,14 +174,14 @@`
`174`	`174`	`// The wrapping element here is needed`
`175`	`175`	`// in order to override the !important rule of .igx-icon--inactive.`
`176`	`176`	`%igx-combo__case-icon {`
`177`		`- .igx-icon {`
	`177`	`+ igx-icon {`
`178`	`178`	`// Important is needed since the .igx-icon--inactive has !important`
`179`	`179`	`color: color($color: 'gray', $variant: 600) !important;`
`180`	`180`	`}`
`181`	`181`	`}`
`182`	`182`
`183`	`183`	`%igx-combo__case-icon--active {`
`184`		`- .igx-icon {`
	`184`	`+ igx-icon {`
`185`	`185`	`color: color($color: 'primary')`
`186`	`186`	`}`
`187`	`187`	`}`
Original file line number	Diff line number	Diff line change
`@@ -99,13 +99,9 @@`
`99`	`99`	`}`
`100`	`100`	`}`
`101`	`101`
`102`		`- igx-icon {`
`103`		`- @if $variant == 'indigo' {`
`104`		`- --component-size: 2;`
`105`		`- } @else {`
`106`		`- width: var(--igx-icon-size, #{rem(15px)});`
`107`		`- height: var(--igx-icon-size, #{rem(15px)});`
`108`		`- font-size: var(--igx-icon-size, #{rem(15px)});`
	`102`	`+ @if $variant != 'indigo' {`
	`103`	`+ igx-icon {`
	`104`	`+ --size: var(--igx-icon-size, #{rem(15px)});`
`109`	`105`	`}`
`110`	`106`	`}`
`111`	`107`	`}`
Original file line number	Diff line number	Diff line change
`@@ -136,6 +136,7 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {`
`136`	`136`
`137`	`137`	`public onClearButtonClick() {`
`138`	`138`	`this.filteringService.clearFilter(this.column.field);`
	`139`	`+ this.selectedOperator = null;`
`139`	`140`	`this.createInitialExpressionUIElement();`
`140`	`141`	`this.cdr.detectChanges();`
`141`	`142`	`}`