feat(aggrid): update peerDependency to latest major version (#1450)

.changeset/curvy-sloths-prove.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix-aggrid': minor
+---
+
+feat(aggrid): update peerDependency to latest major version

packages/aggrid/package.json

@@ -16,7 +16,7 @@
   ],
   "scripts": {
     "build": "gulp",
-    "test:e2e": "playwright test",
+    "visual-regression": "playwright test",
     "host-root": "http-server -a 127.0.0.1"
   },
   "devDependencies": {
@@ -26,7 +26,7 @@
     "@types/gulp": "^4.0.14",
     "@types/gulp-postcss": "^8.0.4",
     "@types/gulp-sass": "^5.0.2",
-    "ag-grid-community": "30.2.0",
+    "ag-grid-community": "^32.1.0",
     "autoprefixer": "10.4.5",
     "cssnano": "^6.0.1",
     "gulp": "^4.0.2",
@@ -41,6 +41,6 @@
     "@siemens/ix": "~2.4.1"
   },
   "peerDependencies": {
-    "ag-grid-community": "^28 || ^29 || ^30"
+    "ag-grid-community": ">=28"
   }
 }

packages/aggrid/scss/ix-aggrid.scss

@@ -128,6 +128,28 @@
     line-height: min(var(--ag-internal-calculated-line-height), var(--ag-internal-padded-row-height));
   }
 
+  .ag-header-icon.ag-header-cell-filter-button:not(.ag-filter-active):not(.ag-has-popup-positioned-under) {
+    opacity: 0;
+  }
+
+  .ag-cell-label-container:hover {
+    .ag-header-icon.ag-header-cell-filter-button {
+      opacity: 1;
+    }
+  }
+
+  .ag-filter-active .ag-icon-filter {
+    color: var(--theme-btn-primary--background);
+  }
+
+  .ag-filter-active:hover .ag-icon-filter {
+    color: var(--theme-btn-primary--background--hover);
+  }
+
+  .ag-filter-active:active .ag-icon-filter {
+    color: var(--theme-btn-primary--background--active);
+  }
+
   .ag-filter-wrapper {
     background-color: var(--theme-color-1);
 

packages/aggrid/tests/aggrid.e2e.ts

@@ -20,10 +20,13 @@ regressionTest.describe('aggrid', () => {
   regressionTest('filter', async ({ page }) => {
     await page.goto('basic.html');
 
-    const filterHandle = await page.waitForSelector('.ag-header-cell:nth-child(2) [ref="eMenu"]');
+    const filterHandle = page.locator('.ag-header-cell:nth-child(2) .ag-icon-filter');
     await filterHandle.click();
 
-    const inputHandle = await page.waitForSelector('.ag-input-field-input.ag-text-field-input');
+    const filterMenu = page.locator('.ag-menu.ag-filter-menu');
+    await expect(filterMenu).toBeVisible();
+
+    const inputHandle = filterMenu.getByPlaceholder('Filter...');
     await inputHandle.fill('Test');
 
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();