@linzjs/step-ag-grid 17.11.0 → 17.13.0

package/dist/GridTheme.scss

@@ -20,6 +20,14 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
         header-height: 40px,
         font-size: calc($grid-base-font-size),
       ),
+      'step-view-list-default.theme-specific': (
+        extend-theme: alpine,
+        row-height: 60px,
+        header-height: 40px,
+        font-size: calc($grid-base-font-size),
+        header-background-color: lui.$iceberg,
+        cell-horizontal-border: none,
+      ),
     ),
 
     input-focus-border-color: lui.$sea,
@@ -52,28 +60,12 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
 .ag-theme-step-default.theme-specific,
 .ag-theme-step-compact.theme-specific {
-  .ag-text-area-input:focus {
-    border-color: lui.$sea;
-  }
-
-  .ag-cell[col-id="selection"] {
-    display: flex; // Fix that when you click below checkbox it doesn't process a click
-  }
 
   // fix alignment of cell content when grabber is present
   .ag-header-cell-comp-wrapper {
     justify-content: end;
   }
 
-  // Fix that when you click below checkbox it doesn't process a click
-  .ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
-    height: auto;
-  }
-
-  .ag-row:last-of-type {
-    border-bottom: 1px solid lui.$dew;
-  }
-
   .ag-header-cell {
     font-size: 14px;
     font-weight: 600;
@@ -86,6 +78,28 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     }
   }
 
+  .ag-header .ag-header-cell[aria-colindex="1"] {
+    padding-left: 17px;
+    padding-right: 15px;
+  }
+
+  .ag-text-area-input:focus {
+    border-color: lui.$sea;
+  }
+
+  .ag-cell[col-id="selection"] {
+    display: flex; // Fix that when you click below checkbox it doesn't process a click
+  }
+
+  // Fix that when you click below checkbox it doesn't process a click
+  .ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
+    height: auto;
+  }
+
+  .ag-row:last-of-type {
+    border-bottom: 1px solid lui.$dew;
+  }
+
   .ag-cell-label-container {
     padding: 8px 0;
 
@@ -93,10 +107,6 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     height: fit-content;
   }
 
-  .ag-header .ag-header-cell[aria-colindex="1"] {
-    padding-left: 17px;
-    padding-right: 15px;
-  }
 
   .ag-cell[aria-colindex="1"] {
     padding-left: lui.$unit-rg;
@@ -200,14 +210,14 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     height: 2px;
     background-color: transparent;
   }
-  
+
   .ag-row-highlight-above::after {
     top:-3px; // moves the top highlight to the position of the bottom highlight
     border-top: 2px dashed lui.$andrea;
   }
 
   .ag-row-highlight-above:first-of-type::after {
-    top:0px; // the first row highlight needs to in the normal position otherwise it is cut off by the top of the table
+    top:0; // the first row highlight needs to in the normal position otherwise it is cut off by the top of the table
   }
 
   .ag-row-highlight-below::after {
@@ -225,7 +235,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   //   box-shadow: -4px 0px 15px -4px rgba(0, 0, 0, 0.1);
   //   right: -4px;
   // }
-  
+
   // div:after {
   //   box-shadow: 15px 0 15px -15px inset;
   //   right: -15px;
@@ -249,3 +259,40 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     clip-path: polygon(-20% 0%, 100% 0%, 100% 100%, -20% 100%);
   }
 }
+
+.ag-theme-step-view-list-default.theme-specific {
+
+  .ag-header-cell {
+    font-size: 14px;
+    font-weight: 600;
+
+    // fix: Display descender line
+    padding: 0 12px;
+
+    .LuiIcon {
+      fill: lui.$surfie;
+    }
+  }
+
+  .ag-header .ag-header-cell[aria-colindex="1"] {
+    padding-left: 32px;
+    padding-right: 12px;
+  }
+
+  .ag-header-group-cell {
+    font-weight: normal;
+    font-size: 22px;
+  }
+
+  .ag-header-cell {
+    font-size: 14px;
+  }
+
+  .ag-row .ag-cell:first-of-type {
+    padding-left: 32px;
+  }
+
+  .ag-row .ag-cell:last-of-type {
+    padding-right: 32px;
+  }
+}

package/dist/src/components/Grid.d.ts

@@ -21,6 +21,7 @@ export interface GridProps {
      */
     selectColumnPinned?: ColDef["pinned"];
     noRowsOverlayText?: string;
+    noRowsMatchingOverlayText?: string;
     animateRows?: boolean;
     rowHeight?: number;
     rowClassRules?: GridOptions["rowClassRules"];

package/dist/src/components/GridNoRowsOverlay.d.ts

@@ -3,6 +3,7 @@ export interface GridNoRowsOverlayProps {
     rowCount: number | undefined | null;
     filteredRowCount: number;
     noRowsOverlayText: string | undefined;
+    noRowsMatchingOverlayText: string | undefined;
     headerRowHeight: number;
 }
 export declare const GridNoRowsOverlay: (props: GridNoRowsOverlayProps) => import("react/jsx-runtime").JSX.Element;

package/dist/step-ag-grid.cjs.js

@@ -311,7 +311,7 @@ const GridNoRowsOverlay = (props) => {
     if (props.rowCount === 0)
         return jsxRuntime.jsx("div", { children: props.noRowsOverlayText ?? "There are currently no rows" });
     if (props.filteredRowCount === 0)
-        return jsxRuntime.jsx("div", { children: "All rows have been filtered" });
+        return jsxRuntime.jsx("div", { children: props.noRowsMatchingOverlayText ?? "All rows have been filtered" });
     return jsxRuntime.jsx("span", {});
 };
 
@@ -2825,7 +2825,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
                     }, onRowDataUpdated: onRowDataChanged, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...lodashEs.omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: rowData, noRowsOverlayComponent: (event) => {
                         let rowCount = 0;
                         event.api.forEachNode(() => rowCount++);
-                        return (jsxRuntime.jsx(GridNoRowsOverlay, { loading: !rowData || params.loading === true, rowCount: rowCount, headerRowHeight: headerRowCount * rowHeight, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText }));
+                        return (jsxRuntime.jsx(GridNoRowsOverlay, { loading: !rowData || params.loading === true, rowCount: rowCount, headerRowHeight: headerRowCount * rowHeight, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText, noRowsMatchingOverlayText: params.noRowsMatchingOverlayText }));
                     }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, onRowDragLeave: onRowDragLeave, suppressCellFocus: params.suppressCellFocus }) })] }));
 };