@skyux/ag-grid 7.9.1 → 7.10.1

package/css/sky-ag-grid.css

@@ -7438,7 +7438,6 @@ button.ag-side-button-button:focus {
 }
 .ag-theme-sky-default {
   --ag-background-color: #fbfbfb;
-  --ag-row-hover-color: #d6cde4;
   --ag-border-color: #cdcfd2;
   --ag-cell-horizontal-padding: 12px;
   --ag-font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
@@ -7653,6 +7652,13 @@ sky-ag-grid-wrapper + sky-infinite-scroll .sky-infinite-scroll {
   margin-top: 0 !important;
 }
 
+.ag-header .ag-header-cell .ag-header-cell-label-sortable {
+  color: var(--sky-text-color-deemphasized);
+}
+.ag-header .ag-header-cell .ag-header-cell-label-sortable:hover {
+  color: var(--sky-text-color-default);
+}
+
 .ag-theme-sky-default .ag-header .ag-header-cell .ag-header-cell-text {
   font-weight: normal;
 }
@@ -7771,6 +7777,9 @@ sky-ag-grid-wrapper.sky-ag-grid-layout-normal .sky-ag-grid ag-grid-angular {
   border: none;
 }
 
+.ag-theme-sky-modern-light ag-grid-angular:not(.sky-ag-grid-editable) .ag-row-hover::before {
+  background-color: transparent;
+}
 .ag-theme-sky-modern-light ag-grid-angular:not(.sky-ag-grid-editable) .ag-header-cell {
   text-transform: uppercase;
 }
@@ -7783,9 +7792,6 @@ sky-ag-grid-wrapper.sky-ag-grid-layout-normal .sky-ag-grid ag-grid-angular {
   padding-bottom: 16px;
   min-height: var(--ag-row-height)-2px;
 }
-.ag-theme-sky-modern-light ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell:hover {
-  border: 1px solid #1870B8;
-}
 .ag-theme-sky-modern-light ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell.sky-ag-grid-cell-invalid {
   border: 1px solid var(--sky-highlight-color-danger);
 }
@@ -7848,6 +7854,9 @@ sky-ag-grid-wrapper.sky-ag-grid-layout-normal .sky-ag-grid ag-grid-angular {
   margin-left: 9px;
 }
 
+.ag-theme-sky-modern-dark ag-grid-angular:not(.sky-ag-grid-editable) .ag-row-hover::before {
+  background-color: transparent;
+}
 .ag-theme-sky-modern-dark ag-grid-angular:not(.sky-ag-grid-editable) .ag-header-cell {
   text-transform: uppercase;
 }
@@ -7860,9 +7869,6 @@ sky-ag-grid-wrapper.sky-ag-grid-layout-normal .sky-ag-grid ag-grid-angular {
   padding-bottom: 16px;
   min-height: var(--ag-row-height)-2px;
 }
-.ag-theme-sky-modern-dark ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell:hover {
-  border: 1px solid #009cd1;
-}
 .ag-theme-sky-modern-dark ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell.sky-ag-grid-cell-invalid {
   border: 1px solid var(--sky-highlight-color-danger);
 }

package/documentation.json

@@ -5516,6 +5516,26 @@
       "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/inline-help.component.ts",
       "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridHeaderInfo } from '@skyux/ag-grid';\n\n@Component({\n  selector: 'app-inline-help',\n  templateUrl: './inline-help.component.html',\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InlineHelpComponent {\n  readonly #displayName: string | undefined;\n\n  constructor(headerInfo: SkyAgGridHeaderInfo) {\n    this.#displayName = headerInfo.displayName;\n  }\n\n  public onHelpClick(): void {\n    alert(`Help was clicked for ${this.#displayName}.`);\n  }\n}\n"
     },
+    {
+      "fileName": "data-grid-paging-demo-data.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/paging/data-grid-paging-demo-data.ts",
+      "rawContents": "export interface SkyAutocompleteOption {\n  id: string;\n  name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n  {\n    id: '1',\n    name: 'Marketing',\n  },\n  {\n    id: '2',\n    name: 'Sales',\n  },\n  {\n    id: '3',\n    name: 'Engineering',\n  },\n  {\n    id: '4',\n    name: 'Customer Support',\n  },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n  Marketing: [\n    {\n      id: '1',\n      name: 'Social Media Coordinator',\n    },\n    {\n      id: '2',\n      name: 'Blog Manager',\n    },\n    {\n      id: '3',\n      name: 'Events Manager',\n    },\n  ],\n  Sales: [\n    {\n      id: '4',\n      name: 'Business Development Representative',\n    },\n    {\n      id: '5',\n      name: 'Account Executive',\n    },\n  ],\n  Engineering: [\n    {\n      id: '6',\n      name: 'Software Engineer',\n    },\n    {\n      id: '7',\n      name: 'Senior Software Engineer',\n    },\n    {\n      id: '8',\n      name: 'Principal Software Engineer',\n    },\n    {\n      id: '9',\n      name: 'UX Designer',\n    },\n    {\n      id: '10',\n      name: 'Product Manager',\n    },\n  ],\n  'Customer Support': [\n    {\n      id: '11',\n      name: 'Customer Support Representative',\n    },\n    {\n      id: '12',\n      name: 'Account Manager',\n    },\n    {\n      id: '13',\n      name: 'Customer Support Specialist',\n    },\n  ],\n};\n\nexport interface SkyAgGridDemoRow {\n  selected?: boolean;\n  name: string;\n  age: number;\n  startDate: Date;\n  endDate?: Date;\n  department: SkyAutocompleteOption;\n  jobTitle?: SkyAutocompleteOption;\n}\n\nexport const SKY_AG_GRID_DEMO_DATA = [\n  {\n    name: 'Billy Bob',\n    age: 55,\n    startDate: new Date('12/1/1994'),\n    department: SKY_DEPARTMENTS[3],\n    jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n  },\n  {\n    name: 'Jane Deere',\n    age: 33,\n    startDate: new Date('7/15/2009'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][2],\n  },\n  {\n    name: 'John Doe',\n    age: 38,\n    startDate: new Date('9/1/2017'),\n    endDate: new Date('9/30/2017'),\n    department: SKY_DEPARTMENTS[1],\n  },\n  {\n    name: 'David Smith',\n    age: 51,\n    startDate: new Date('1/1/2012'),\n    endDate: new Date('6/15/2018'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][4],\n  },\n  {\n    name: 'Emily Johnson',\n    age: 41,\n    startDate: new Date('1/15/2014'),\n    department: SKY_DEPARTMENTS[0],\n    jobTitle: SKY_JOB_TITLES['Marketing'][2],\n  },\n  {\n    name: 'Nicole Davidson',\n    age: 22,\n    startDate: new Date('11/1/2019'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][0],\n  },\n  {\n    name: 'Carl Roberts',\n    age: 23,\n    startDate: new Date('11/1/2019'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][3],\n  },\n];\n"
+    },
+    {
+      "fileName": "data-grid-paging-demo.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/paging/data-grid-paging-demo.component.html",
+      "rawContents": "<div>\n  <sky-ag-grid-wrapper>\n    <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"gridData\">\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</div>\n<sky-paging\n  [itemCount]=\"gridData.length\"\n  [pageSize]=\"pageSize\"\n  [currentPage]=\"currentPage\"\n  (currentPageChange)=\"onPageChange($event)\"\n>\n</sky-paging>\n"
+    },
+    {
+      "fileName": "data-grid-paging-demo.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/paging/data-grid-paging-demo.component.ts",
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnDestroy,\n  OnInit,\n  inject,\n} from '@angular/core';\nimport { ActivatedRoute, NavigationEnd, Router } from '@angular/router';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\nimport { Subscription } from 'rxjs';\nimport { filter, map } from 'rxjs/operators';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './data-grid-paging-demo-data';\n\n@Component({\n  selector: 'app-data-grid-paging-demo',\n  templateUrl: './data-grid-paging-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataGridPagingDemoComponent implements OnInit, OnDestroy {\n  public currentPage = 1;\n\n  public readonly pageSize = 3;\n  public columnDefs: ColDef[] = [\n    {\n      field: 'name',\n      headerName: 'Name',\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n  ];\n\n  public gridApi: GridApi | undefined;\n  public gridData = SKY_AG_GRID_DEMO_DATA;\n  public gridOptions: GridOptions;\n  public searchText = '';\n\n  #activatedRoute = inject(ActivatedRoute);\n  #agGridService = inject(SkyAgGridService);\n  #changeDetector = inject(ChangeDetectorRef);\n  #router = inject(Router);\n  #subscriptions = new Subscription();\n\n  constructor() {\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n      rowSelection: 'single',\n      pagination: true,\n      suppressPaginationPanel: true,\n      paginationPageSize: this.pageSize,\n    };\n    this.gridOptions = this.#agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n  }\n\n  public ngOnInit(): void {\n    this.#subscriptions.add(\n      this.#activatedRoute.queryParamMap\n        .pipe(map((params) => params.get('page') || '1'))\n        .subscribe((page) => {\n          this.currentPage = Number(page);\n          this.gridApi?.paginationGoToPage(this.currentPage - 1);\n          this.#changeDetector.detectChanges();\n        })\n    );\n    this.#subscriptions.add(\n      this.#router.events\n        .pipe(filter((event) => event instanceof NavigationEnd))\n        .subscribe(() => {\n          const page = this.#activatedRoute.snapshot.paramMap.get('page');\n          if (page) {\n            this.currentPage = Number(page);\n          }\n          this.gridApi?.paginationGoToPage(this.currentPage - 1);\n          this.#changeDetector.detectChanges();\n        })\n    );\n  }\n\n  public ngOnDestroy(): void {\n    this.#subscriptions.unsubscribe();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.gridApi.paginationGoToPage(this.currentPage - 1);\n  }\n\n  public onPageChange(page: number): void {\n    this.#router\n      .navigate(['.'], {\n        relativeTo: this.#activatedRoute,\n        queryParams: { page: page.toString(10) },\n        queryParamsHandling: 'merge',\n      })\n      .then();\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
+    },
+    {
+      "fileName": "data-grid-paging-demo.module.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/paging/data-grid-paging-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerModule,\n  SkyDataManagerService,\n} from '@skyux/data-manager';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkyPagingModule } from '@skyux/lists';\nimport { SkySearchModule } from '@skyux/lookup';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { DataGridPagingDemoComponent } from './data-grid-paging-demo.component';\n\n@NgModule({\n  declarations: [DataGridPagingDemoComponent],\n  exports: [DataGridPagingDemoComponent],\n  imports: [\n    CommonModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n    SkyPagingModule,\n  ],\n  providers: [SkyDataManagerService],\n})\nexport class DataGridPagingDemoModule {}\n"
+    },
     {
       "fileName": "top-scroll-data-grid-demo-data.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/top-scroll/top-scroll-data-grid-demo-data.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/ag-grid",
-  "version": "7.9.1",
+  "version": "7.10.1",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -35,17 +35,17 @@
     "@angular/common": "^14.2.11",
     "@angular/core": "^14.2.11",
     "@angular/forms": "^14.2.11",
-    "@skyux/autonumeric": "7.9.1",
-    "@skyux/core": "7.9.1",
-    "@skyux/data-manager": "7.9.1",
-    "@skyux/datetime": "7.9.1",
-    "@skyux/forms": "7.9.1",
-    "@skyux/i18n": "7.9.1",
-    "@skyux/indicators": "7.9.1",
-    "@skyux/layout": "7.9.1",
-    "@skyux/lookup": "7.9.1",
-    "@skyux/popovers": "7.9.1",
-    "@skyux/theme": "7.9.1",
+    "@skyux/autonumeric": "7.10.1",
+    "@skyux/core": "7.10.1",
+    "@skyux/data-manager": "7.10.1",
+    "@skyux/datetime": "7.10.1",
+    "@skyux/forms": "7.10.1",
+    "@skyux/i18n": "7.10.1",
+    "@skyux/indicators": "7.10.1",
+    "@skyux/layout": "7.10.1",
+    "@skyux/lookup": "7.10.1",
+    "@skyux/popovers": "7.10.1",
+    "@skyux/theme": "7.10.1",
     "ag-grid-angular": "^28.2.1",
     "ag-grid-community": "^28.2.1"
   },