Merge branch '17.2.x' into aahmedov/fix-touched-ivalid-color-not-applied-#14900-17.2.x

Author: Zneeky

.vscode/launch.json

@@ -27,20 +27,13 @@
             // "cwd": "<absolute directory of the project, having an old version of igniteui-angular, on which the migrations are applied>",
             "cwd": "C:\\Users\\User\\Desktop\\ng_proj\\test_migrations",
             "args": [
-                "-r",
-
-                // you need to install ts-node for the test project
-                "ts-node/register",
-
                 // "<path/to/ng>", "g",
                 "${env:AppData}/npm/node_modules/@angular/cli/bin/ng", "g",
 
-                // "<../../relative/path/from/cwd/to>/igniteui-angular/projects/igniteui-angular/migrations/migration-collection.json:migration-<number>
-                "../../../../../work/git/igniteui-angular/projects/igniteui-angular/migrations/migration-collection.json:migration-24"
+                // "<../../relative/path/from/cwd/to>/igniteui-angular/dist/igniteui-angular/migrations/migration-collection.json:migration-<number>
+                "../../../../../work/git/igniteui-angular/dist/igniteui-angular/migrations/migration-collection.json:migration-23"
             ],
-            "env": {
-                "TS_NODE_PROJECT": "${workspaceFolder}/projects/igniteui-angular/migrations/tsconfig.json"
-            }
+            "preLaunchTask": "buildMigrations"
         },
         {
             "name": "Run schematics",

.vscode/tasks.json

@@ -0,0 +1,32 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "npm",
+            "script": "build:schematics",
+            "problemMatcher": [],
+            "label": "buildSchematics",
+            "detail": "Build schematics"
+        },
+        {
+            "type": "npm",
+            "script": "build:migrations -- --sourceMap",
+            "dependsOn": [
+                "buildSchematics"
+            ],
+            "problemMatcher": [],
+            "label": "buildMigrationsSourceMap",
+            "detail": "Build migrations with sourceMap for debugging"
+        },
+        {
+            "type": "shell",
+            "command": "node ./scripts/migrations-sourcemap-shift.mjs",
+            "dependsOn": [
+                "buildMigrationsSourceMap"
+            ],
+            "problemMatcher": [],
+            "label": "buildMigrations",
+            "detail": "Build migrations with sourceMap for debugging"
+        },
+    ]
+}

projects/igniteui-angular/migrations/common/ServerHost.ts

@@ -2,6 +2,7 @@ import type { Tree } from '@angular-devkit/schematics';
 import * as pathFs from 'path';
 import * as ts from 'typescript/lib/tsserverlibrary';
 import { CUSTOM_TS_PLUGIN_NAME, CUSTOM_TS_PLUGIN_PATH } from './tsUtils';
+import { createRequire } from 'module';
 
 /**
  * Language server host is responsible for **most** of the FS operations / checks
@@ -11,6 +12,8 @@ export class ServerHost implements ts.server.ServerHost {
     public readonly args: string[];
     public readonly newLine: string;
     public readonly useCaseSensitiveFileNames: boolean;
+    /** Cached because Angular schematics encapsulation's customRequire doesn't provide `resolve` */
+    private nativeRequire = createRequire(__filename);
 
     constructor(private host: Tree) {
         this.args = ts.sys.args;
@@ -126,7 +129,7 @@ export class ServerHost implements ts.server.ServerHost {
                 moduleName = CUSTOM_TS_PLUGIN_PATH;
                 paths.push(__dirname);
             }
-            const modulePath = require.resolve(moduleName, { paths });
+            const modulePath = this.nativeRequire.resolve(moduleName, { paths });
             return {
                 module: require(modulePath),
                 error: undefined,

projects/igniteui-angular/migrations/common/UpdateChanges.ts

@@ -682,7 +682,7 @@ export class UpdateChanges {
         }
 
         // attempt to find a main tsconfig from workspace:
-        const wsProject = this.workspace.projects[0];
+        const wsProject = Object.values(this.workspace.projects)[0];
         // technically could be per-project, but assuming there's at least one main tsconfig for IDE support
         const projectConfig = wsProject.architect?.build?.options['tsConfig'];
 
@@ -847,8 +847,8 @@ export class UpdateChanges {
         for (const key of projectKeys) {
             const wsProject = this.workspace.projects[key];
             // intentionally compare against string values of the enum to avoid hard import
-            if (wsProject.projectType == "application" && wsProject.architect?.build?.options['main']) {
-                return wsProject.architect.build.options['main'];
+            if (wsProject.projectType == "application" && wsProject.architect?.build?.options) {
+                return wsProject.architect.build.options['browser'] || wsProject.architect.build.options['main'];
             } else if (wsProject.projectType == "library") {
                 // TODO: attempt to resolve from project ng-package.json or tsConfig
             }

projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss

@@ -225,7 +225,7 @@
             .igx-filter-tree__expression-column {
                 padding-inline: pad-inline(rem(3px), rem(6px), rem(8px));
             }
-            
+
             igx-prefix {
                 display: flex;
             }
@@ -239,20 +239,10 @@
     %filter-tree__expression-actions {
         display: inline-flex;
         margin: 0 rem(8px);
+        gap: rem(8px);
 
-        igx-icon {
-            cursor: pointer;
-            color: color(null, 'gray', 500);
-            outline-style: none;
-
-            &:hover,
-            &:focus {
-                color: color(null, 'gray', 800);
-            }
-        }
-
-        igx-icon + igx-icon {
-            margin-inline-start: rem(8px);
+        %igx-icon-button-display {
+            --size: #{sizable(rem(20px), rem(24px), rem(32px))};
         }
     }
 

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

@@ -350,7 +350,7 @@
         }
 
         @if $bootstrap-theme {
-            border: rem(1px) solid transparent;
+            padding-block: rem(12px);
             border-start-start-radius: var-get($theme, 'border-radius');
             border-start-end-radius: var-get($theme, 'border-radius');
         }

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

@@ -285,6 +285,9 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
             if (this.pinned) {
                 child.pinned = this.pinned;
             }
+            if (this._hidden) {
+                child.hidden = this._hidden;
+            }
         });
         if (this.collapsible) {
             this.setExpandCollapseState();

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

@@ -221,6 +221,16 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
 
     /**
      * Gets the minimum height.
+     * 
+     * Setting value in template: 
+     * ```ts
+     * [minHeight]="'<number><unit (px|rem|etc..)>'" 
+     * ```
+     * 
+     * Example for setting a value: 
+     * ```ts
+     * [minHeight]="'700px'"
+     * ```
      */
     @Input()
     public get minHeight(): string {
@@ -258,6 +268,16 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
 
     /**
      * Gets the maximum height.
+     * 
+     * Setting value in template: 
+     * ```ts
+     * [maxHeight]="'<number><unit (px|rem|etc..)>'" 
+     * ```
+     * 
+     * Example for setting a value: 
+     * ```ts
+     * [maxHeight]="'700px'"
+     * ```
      */
     @Input()
     @HostBinding('style.max-height')

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

@@ -18,7 +18,8 @@ import { OneGroupOneColGridComponent, OneGroupThreeColsGridComponent,
     NestedColGroupsGridComponent, StegosaurusGridComponent,
     OneColPerGroupGridComponent, NestedColumnGroupsGridComponent,
     DynamicGridComponent, NestedColGroupsWithTemplatesGridComponent,
-    DynamicColGroupsGridComponent } from '../../test-utils/grid-mch-sample.spec';
+    DynamicColGroupsGridComponent,
+    ColumnGroupHiddenInTemplateComponent} from '../../test-utils/grid-mch-sample.spec';
 import { CellType } from '../common/grid.interface';
 
 const GRID_COL_THEAD_TITLE_CLASS = 'igx-grid-th__title';
@@ -47,7 +48,8 @@ describe('IgxGrid - multi-column headers #grid', () => {
                 NestedColumnGroupsGridComponent,
                 DynamicGridComponent,
                 NestedColGroupsWithTemplatesGridComponent,
-                DynamicColGroupsGridComponent
+                DynamicColGroupsGridComponent,
+                ColumnGroupHiddenInTemplateComponent
             ]
         })
         .compileComponents();
@@ -392,6 +394,20 @@ describe('IgxGrid - multi-column headers #grid', () => {
             expect(generalHeader.nativeElement.firstElementChild.title).toBe('General Information Title');
             expect(addressHeader.nativeElement.firstElementChild.title).toBe('Address Information');
         });
+
+        it('should hide column group when hidden property is set to true in the template - parent and child level', () => {
+            fixture = TestBed.createComponent(ColumnGroupHiddenInTemplateComponent);
+            fixture.detectChanges();
+
+            grid = fixture.componentInstance.grid;
+            const generalGroup = grid.columnList.find(c => c.header === 'General Information');
+            const locationGroup = grid.columnList.find(c => c.header === 'Location');
+            expect(generalGroup.hidden).toBe(true);
+            expect(locationGroup.hidden).toBe(true);
+
+            expect(GridFunctions.getColumnHeaders(fixture).length).toEqual(6);
+            expect(GridFunctions.getColumnGroupHeaders(fixture).length).toEqual(2);
+        });
     });
 
     describe('Columns widths tests (1 group 1 column) ', () => {

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

@@ -3001,6 +3001,40 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
                 verifyContextMenuVisibility(fix, false);
             }));
 
+            it('Should navigate with Tab/Shift+Tab through chips" "edit", "cancel" and "adding" buttons, fields of a condition in edit mode.', fakeAsync(() => {
+                // Apply advanced filter through API.
+                const tree = new FilteringExpressionsTree(FilteringLogic.Or);
+                tree.filteringOperands.push({
+                    fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
+                    ignoreCase: true
+                });
+                tree.filteringOperands.push({
+                    fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
+                    ignoreCase: true
+                });
+                grid.advancedFilteringExpressionsTree = tree;
+                fix.detectChanges();
+    
+                // Open Advanced Filtering dialog.
+                grid.openAdvancedFilteringDialog();
+                fix.detectChanges();
+
+                // Press 'Enter' on the second chip and verify it is selected.
+                UIInteractions.triggerKeyDownEvtUponElem('Enter', GridFunctions.getAdvancedFilteringTreeExpressionChip(fix, [0]));
+                tick(200);
+                fix.detectChanges();
+
+                let chipActions = fix.debugElement.query(By.css('.igx-filter-tree'));
+                GridFunctions.verifyTabbableElements(chipActions);
+
+                // Press 'Enter' on the edit button.
+                UIInteractions.triggerKeyDownEvtUponElem('Enter', GridFunctions.getAdvancedFilteringTreeExpressionEditIcon(fix, [0]));
+                fix.detectChanges();
+
+                chipActions = fix.debugElement.query(By.css('.igx-filter-tree'));
+                GridFunctions.verifyInEditTabbableElements(chipActions);
+            }));
+
         });
 
     });