fix(components/ag-grid): allow overriding grid min-height (#3077)

[AB#3239244](https://dev.azure.com/blackbaud/f565481a-7bc9-4083-95d5-4f953da6d499/_workitems/edit/3239244)

libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.html

@@ -15,6 +15,7 @@
   [ngClass]="wrapperClasses$ | async"
   [id]="gridId"
   [skyViewkeeper]="viewkeeperClasses"
+  [style]="minHeightStyle()"
   (keydown)="onGridKeydown($event)"
   (keyup.escape)="onKeyUpEscape($event)"
 >

libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.spec.ts

@@ -124,6 +124,16 @@ describe('SkyAgGridWrapperComponent', () => {
     await expectAsync(gridWrapperNativeElement).toBeAccessible();
   });
 
+  it('should set the min height', () => {
+    gridWrapperFixture.componentRef.setInput('minHeight', 150);
+    gridWrapperFixture.detectChanges();
+    expect(
+      gridWrapperNativeElement
+        .querySelector('div.sky-ag-grid')
+        ?.getAttribute('style'),
+    ).toEqual('--sky-ag-grid-min-height: 150px;');
+  });
+
   it('should add .ag-header to the viewkeeper classes when the domLayout is set to autoHeight', () => {
     agGrid.gridOptions = { domLayout: 'autoHeight' };
 

libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.ts

@@ -12,7 +12,10 @@ import {
   OnDestroy,
   OnInit,
   booleanAttribute,
+  computed,
   inject,
+  input,
+  numberAttribute,
 } from '@angular/core';
 import { SkyMutationObserverService } from '@skyux/core';
 import {
@@ -74,6 +77,13 @@ export class SkyAgGridWrapperComponent
     this.#isCompact.next(value);
   }
 
+  /**
+   * The minimum height of the grid in pixels. The default value is `50`.
+   */
+  public readonly minHeight = input<number, unknown>(50, {
+    transform: numberAttribute,
+  });
+
   public afterAnchorId: string;
   public beforeAnchorId: string;
   public gridId: string;
@@ -113,6 +123,10 @@ export class SkyAgGridWrapperComponent
     return false;
   }
 
+  protected readonly minHeightStyle = computed(() => {
+    return `--sky-ag-grid-min-height: ${this.minHeight()}px;`;
+  });
+
   #_viewkeeperClasses: string[] = [];
   readonly #ngUnsubscribe = new Subject<void>();
   readonly #themeSvc = inject(SkyThemeService, {

libs/components/ag-grid/src/lib/styles/_base.scss

@@ -169,6 +169,10 @@ $modernDarkThemeCompact: map.merge($modernDarkThemeBase, $modernThemeCompact);
     cursor: initial;
   }
 
+  .ag-layout-auto-height .ag-body .ag-center-cols-viewport {
+    min-height: var(--sky-ag-grid-min-height, 50px);
+  }
+
   .ag-scrollbar-invisible.sky-viewkeeper-fixed {
     box-shadow: none;
   }