@linzjs/step-ag-grid 29.6.0 → 29.8.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.6.0",
+  "version": "29.8.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/gridFilter/GridFilterColumnsMultiSelect.scss

@@ -5,13 +5,17 @@
     padding: 8px;
     @include lui.font-semibold();
 
+    .LuiSelect-label-text {
+        color: lui.$fuscous;
+        display: inline-block;
+    }
+
     .LuiCheckboxInput-selectAll,
     .LuiCheckboxInput-item {
         color: lui.$charcoal;
         line-height: 20px;
         margin-bottom: 0;
         font-weight: 600;
-        font-style: SemiBold;
         font-size: 16px;
         line-height: 24px;
         letter-spacing: 0%;

package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx

@@ -100,6 +100,7 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
     this.labelFormatter = params.labelFormatter;
 
     this.allValues = this.loadFieldValues();
+    this.selectedValues = new Set(this.allValues);
 
     this.gui = document.createElement('div');
     this.reactRoot = createRoot(this.gui);

package/src/components/gridFilter/index.ts

@@ -1,4 +1,5 @@
 export * from './GridFilterButtons';
+export * from './GridFilterColumnsMultiSelect';
 export * from './GridFilterColumnsToggle';
 export * from './GridFilterDownloadCsvButton';
 export * from './GridFilterHeaderIconButton';

package/src/stories/grid/GridFilterButtons.stories.tsx

@@ -73,7 +73,7 @@ const GridFilterButtonsTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridPr
     { id: 1002, position: 'Manager', age: 65, desc: 'Technical Manager' },
     { id: 1003, position: 'Tester', age: 30, desc: 'E2E tester' },
     { id: 1004, position: 'Developer', age: 12, desc: 'Fullstack Developer' },
-    { id: 1005, position: 'Developer', age: 12, desc: 'Backend Developer' },
+    { id: 1005, position: 'Developer', age: 14, desc: 'Backend Developer' },
     { id: 1006, position: 'Architect', age: 30, desc: 'Architect' },
   ]);
 

package/src/stories/grid/GridFilterColumnsMultiSelect.stories.tsx

@@ -82,7 +82,7 @@ const GridFilterColumnsMultiSelectTemplate: StoryFn<typeof Grid<ITestRow>> = (pr
     { id: 1002, position: 'Manager', age: 65, desc: 'Technical Manager' },
     { id: 1003, position: 'Tester', age: 30, desc: 'E2E tester' },
     { id: 1004, position: 'Developer', age: 12, desc: 'Fullstack Developer' },
-    { id: 1005, position: 'Developer', age: 12, desc: 'Backend Developer' },
+    { id: 1005, position: 'Developer', age: 13, desc: 'Backend Developer' },
     { id: 1006, position: 'Architect', age: 30, desc: 'Architect' },
   ]);
 

package/src/styles/GridTheme.scss

@@ -143,6 +143,18 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     overflow-x: auto;
   }
 
+  .ag-icon-filter {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A292C'%3E%3Cpath d='M6 12.984v-1.969h12v1.969zM3 6h18v2.016H3zm6.984 12v-2.016h4.031V18z'/%3E%3C/svg%3E") !important;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    background-color: transparent;
+
+    &::before {
+      content: none !important;
+    }
+  }
+
   .ag-header-group-cell {
     text-transform: uppercase;
     font-size: 12px;
@@ -265,4 +277,4 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   .ag-header-cell {
     font-size: 14px;
   }
-}
+}