feat(components/ag-grid): support AG Grid 32.2 (#2759)

* feat(components/ag-grid): support AG Grid 32.2

* Fix serving storybook SPAs with Angular. Fix AG Grid 32.2 header styles.

* Provide router

* Fix e2e tests

apps/e2e/a11y-storybook/src/app/skip-link/skip-link.component.ts

@@ -7,7 +7,7 @@ import {
   inject,
 } from '@angular/core';
 import { SkySkipLinkService } from '@skyux/a11y';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
 

apps/e2e/action-bars-storybook/src/app/summary-action-bar/summary-action-bar.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnDestroy, inject } from '@angular/core';
 import { SkyModalInstance, SkyModalService } from '@skyux/modals';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { SummaryActionBarModalComponent } from './summary-action-bar-modal.component';
 

apps/e2e/ag-grid-storybook/src/app/ag-grid-widgets/ag-grid-widgets.component.ts

@@ -10,7 +10,8 @@ import {
   inject,
 } from '@angular/core';
 import { SkyAgGridModule, SkyAgGridService, SkyCellType } from '@skyux/ag-grid';
-import { FontLoadingService, PreviewWrapperModule } from '@skyux/storybook';
+import { PreviewWrapperModule } from '@skyux/storybook/components';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 import {
   SkyTheme,
   SkyThemeMode,

apps/e2e/ag-grid-storybook/src/app/ag-grid/ag-grid-stories.component.ts

@@ -15,7 +15,7 @@ import {
   SkyCellType,
 } from '@skyux/ag-grid';
 import { SkyDockLocation, SkyDockService } from '@skyux/core';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 import { SkyThemeService, SkyThemeSettings } from '@skyux/theme';
 
 import { ColDef, GridOptions, RowSelectedEvent } from 'ag-grid-community';

apps/e2e/ag-grid-storybook/src/app/ag-grid/ag-grid-stories.module.ts

@@ -4,7 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { SkyAgGridModule } from '@skyux/ag-grid';
 import { SkyBackToTopModule } from '@skyux/layout';
 import { SkyDropdownModule } from '@skyux/popovers';
-import { PreviewWrapperModule } from '@skyux/storybook';
+import { PreviewWrapperModule } from '@skyux/storybook/components';
 import { SkyThemeModule } from '@skyux/theme';
 
 import { AgGridModule } from 'ag-grid-angular';

apps/e2e/ag-grid-storybook/src/app/data-entry-grid/data-entry-grid.component.ts

@@ -8,7 +8,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 import {
   SkyTheme,
   SkyThemeMode,

apps/e2e/ag-grid-storybook/src/app/data-entry-grid/data-entry-grid.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SkyAgGridModule } from '@skyux/ag-grid';
-import { PreviewWrapperModule } from '@skyux/storybook';
+import { PreviewWrapperModule } from '@skyux/storybook/components';
 import { SkyThemeModule } from '@skyux/theme';
 
 import { AgGridModule } from 'ag-grid-angular';

apps/e2e/ag-grid-storybook/src/app/data-manager/data-manager.component.ts

@@ -15,7 +15,7 @@ import {
   SkyDataManagerService,
   SkyDataManagerState,
 } from '@skyux/data-manager';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { FirstDataRenderedEvent, GridOptions } from 'ag-grid-community';
 import {

apps/e2e/avatar-storybook/src/app/avatar/avatar.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { delay } from 'rxjs';
 

apps/e2e/core-storybook/src/app/affix/affix.component.ts

@@ -12,7 +12,7 @@ import {
   SkyAffixPosition,
   SkyAffixVerticalAlignment,
 } from '@skyux/core';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 @Component({
   selector: 'app-affix',

apps/e2e/data-manager-storybook/src/app/data-manager/data-manager.component.ts

@@ -10,7 +10,7 @@ import {
   SkyDataManagerService,
   SkyDataManagerState,
 } from '@skyux/data-manager';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
 

apps/e2e/datetime-storybook/src/app/date-range-picker/date-range-picker.component.ts

@@ -4,7 +4,7 @@ import {
   SkyDateRangeCalculation,
   SkyDateRangeCalculatorId,
 } from '@skyux/datetime';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 @Component({
   selector: 'app-date-range-picker',

apps/e2e/datetime-storybook/src/app/datepicker/datepicker.component.ts

@@ -10,7 +10,7 @@ import {
   SkyDatepickerCalendarChange,
   SkyDatepickerCustomDate,
 } from '@skyux/datetime';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { of } from 'rxjs';
 import { delay, distinctUntilChanged } from 'rxjs/operators';

apps/e2e/errors-storybook/src/app/error/error.component.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, OnDestroy, inject } from '@angular/core';
 import { SkyErrorType } from '@skyux/errors';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
 

apps/e2e/flyout-storybook/src/app/flyout/flyout.component.ts

@@ -11,7 +11,7 @@ import {
   SkyFlyoutPermalink,
   SkyFlyoutService,
 } from '@skyux/flyout';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
 

apps/e2e/forms-storybook/src/app/selection-box/selection-box.component.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, OnDestroy, inject } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
 

apps/e2e/indicators-storybook/src/app/icon/icon.component.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, OnDestroy, inject } from '@angular/core';
 import { SkyIconManifestGlyph, getIconManifest } from '@skyux/icons';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
 

apps/e2e/layout-storybook/src/app/box/box.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 @Component({
   selector: 'app-box',

apps/e2e/lists-storybook/src/app/infinite-scroll/infinite-scroll.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, OnDestroy, inject } from '@angular/core';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
 

apps/e2e/lookup-storybook/src/app/autocomplete/autocomplete.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 @Component({
   selector: 'app-autocomplete',

apps/e2e/lookup-storybook/src/app/country-field/country-field.component.ts

@@ -4,7 +4,7 @@ import {
   UntypedFormGroup,
   Validators,
 } from '@angular/forms';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 @Component({
   selector: 'app-country-field',

apps/e2e/lookup-storybook/src/app/lookup/lookup.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, inject } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 export interface Names {
   name: string;

apps/e2e/lookup-storybook/src/app/search/search.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 @Component({
   selector: 'app-search',

apps/e2e/navbar-storybook/src/app/navbar/navbar.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, OnDestroy, inject } from '@angular/core';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
 

apps/e2e/split-view-storybook/src/app/split-view/split-view.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, OnDestroy, inject } from '@angular/core';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
 

libs/components/ag-grid/package.json

@@ -36,8 +36,8 @@
     "@skyux/lookup": "0.0.0-PLACEHOLDER",
     "@skyux/popovers": "0.0.0-PLACEHOLDER",
     "@skyux/theme": "0.0.0-PLACEHOLDER",
-    "ag-grid-angular": "^32.1.0",
-    "ag-grid-community": "^32.1.0"
+    "ag-grid-angular": "^32.2.0",
+    "ag-grid-community": "^32.2.0"
   },
   "dependencies": {
     "tslib": "^2.6.3"

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

@@ -207,6 +207,16 @@ describe('SkyAgGridService', () => {
     });
 
     it('should set icons for modern theme', () => {
+      const options = agGridService.getGridOptions({
+        gridOptions: {},
+      });
+
+      expect(typeof options.icons?.['sortDescending']).toBe('function');
+
+      expect((options.icons?.['sortDescending'] as () => string)()).toBe(
+        `<i aria-hidden="true" class="fa fa-caret-down"></i>`,
+      );
+
       // Trigger change to modern theme
       mockThemeSvc.settingsChange.next({
         currentSettings: new SkyThemeSettings(
@@ -217,20 +227,18 @@ describe('SkyAgGridService', () => {
           mockThemeSvc.settingsChange.getValue().currentSettings,
       });
 
-      const modernThemeGridOptions = agGridService.getGridOptions({
-        gridOptions: {},
-      });
-
-      expect(typeof modernThemeGridOptions.icons?.['sortDescending']).toBe(
-        'function',
+      expect((options.icons?.['sortDescending'] as () => string)()).toBe(
+        `<i aria-hidden="true" class="sky-i-chevron-down"></i>`,
       );
-      expect(
-        (modernThemeGridOptions.icons?.['sortDescending'] as () => string)(),
-      ).toBe(`<i aria-hidden="true" class="sky-i-chevron-down"></i>`);
     });
 
     it('should unsubscribe from the theme service when destroyed', () => {
       expect(agGridService.getHeaderHeight()).toBe(37);
+      expect(
+        agGridService.getGridOptions({ gridOptions: {} }).columnTypes?.[
+          SkyCellType.Date
+        ].minWidth,
+      ).toBe(160);
 
       // Trigger change to modern theme
       mockThemeSvc.settingsChange.next({
@@ -244,6 +252,11 @@ describe('SkyAgGridService', () => {
 
       // Get new grid options after theme change
       expect(agGridService.getHeaderHeight()).toBe(60);
+      expect(
+        agGridService.getGridOptions({ gridOptions: {} }).columnTypes?.[
+          SkyCellType.Date
+        ].minWidth,
+      ).toBe(180);
 
       // Destroy subscription
       agGridService.ngOnDestroy();
@@ -260,6 +273,11 @@ describe('SkyAgGridService', () => {
 
       // Get new grid options after theme change, but expect heights have not changed
       expect(agGridService.getHeaderHeight()).toBe(60);
+      expect(
+        agGridService.getGridOptions({ gridOptions: {} }).columnTypes?.[
+          SkyCellType.Date
+        ].minWidth,
+      ).toBe(180);
     });
 
     it('should not overwrite default component definitions', () => {

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

@@ -185,6 +185,10 @@ $modernDarkThemeCompact: map.merge($modernDarkThemeBase, $modernThemeCompact);
     outline-style: solid;
     outline-offset: 0;
   }
+
+  .ag-ltr .ag-header-cell-resize {
+    right: -4px;
+  }
 }
 
 .ag-theme-sky-data-grid-default,

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

@@ -43,11 +43,19 @@
     --ag-header-column-resize-handle-width: 3px;
   }
 
+  .ag-header-cell.sky-ag-grid-header-resizable.ag-column-resizing
+    .ag-header-cell-resize::after {
+    height: 100%;
+    top: 0;
+  }
+
   .ag-header-cell.sky-ag-grid-header-resizable:not(.ag-column-resizing)
     > .ag-header-cell-resize:hover {
     &::after {
       position: relative;
       left: 2px;
+      top: 0;
+      height: 100%;
     }
   }
 
@@ -58,9 +66,19 @@
 
   @for $i from 1 through 100 {
     .ag-root:has(
-        .ag-header-cell.sky-ag-grid-header-resizable:nth-child(#{$i})
+        .ag-header-cell.sky-ag-grid-header-resizable:not(
+            .ag-column-resizing
+          ):nth-child(#{$i})
           > .ag-header-cell-resize:hover
       ) {
+      .ag-header-cell.ag-floating-filter:nth-child(#{$i})::before {
+        top: 0;
+        --ag-header-column-separator-color: var(
+          --sky-text-color-action-primary
+        );
+        --ag-header-column-separator-height: 100%;
+        --ag-header-column-separator-width: 1px;
+      }
       .ag-cell:nth-child(#{$i}) {
         --ag-cell-horizontal-border: 1px
           solid
@@ -73,6 +91,14 @@
             #{$i}
           )
       ) {
+      .ag-header-cell.ag-floating-filter:nth-child(#{$i})::before {
+        top: 0;
+        --ag-header-column-separator-color: var(
+          --sky-text-color-action-primary
+        );
+        --ag-header-column-separator-height: 100%;
+        --ag-header-column-separator-width: 3px;
+      }
       .ag-cell:nth-child(#{$i}) {
         --ag-cell-horizontal-border: 3px
           solid

libs/components/packages/package.json

@@ -84,8 +84,8 @@
       "@skyux/tiles": "0.0.0-PLACEHOLDER",
       "@skyux/toast": "0.0.0-PLACEHOLDER",
       "@skyux/validation": "0.0.0-PLACEHOLDER",
-      "ag-grid-angular": "^32.1.0",
-      "ag-grid-community": "^32.1.0",
+      "ag-grid-angular": "^32.2.0",
+      "ag-grid-community": "^32.2.0",
       "ag-grid-enterprise": "^32.1.0",
       "autonumeric": "^4.10.5"
     }

libs/components/packages/src/schematics/ag-grid-migrate/ag-grid-migrate.schematic.spec.ts

@@ -19,7 +19,7 @@ interface TestSetup {
   schematic: (options: Schema) => Rule;
 }
 
-const UPDATE_TO_VERSION = '32.1.0';
+const UPDATE_TO_VERSION = '32.2.0';
 const UPDATE_TO_MIGRATION = '32.0.7';
 
 describe('ag-grid-migrate.schematic', () => {

libs/components/packages/src/schematics/ag-grid-migrate/ag-grid-migrate.schematic.ts

@@ -6,7 +6,7 @@ import { platform } from 'os';
 import { Schema } from './schema';
 
 const AG_GRID_MIGRATION = '32.0.7';
-const AG_GRID_VERSION = '32.1.0';
+const AG_GRID_VERSION = '32.2.0';
 
 function getStartingVersion(sourceRoot: string): string | undefined {
   try {

libs/components/packages/src/schematics/migrations/update-11/ag-grid/ag-grid.schematic.spec.ts

@@ -5,7 +5,7 @@ import fs from 'fs-extra';
 import { joinPathFragments } from 'nx/src/utils/path';
 import { workspaceRoot } from 'nx/src/utils/workspace-root';
 
-const UPDATE_TO_VERSION = '32.1.0';
+const UPDATE_TO_VERSION = '32.2.0';
 
 describe('ag-grid.schematic', () => {
   const runner = new SchematicTestRunner(