@skyux/ag-grid 5.2.1 → 5.5.0-beta.0

package/documentation.json

@@ -14,7 +14,7 @@
     "originalName": "",
     "children": [
       {
-        "id": 379,
+        "id": 542,
         "name": "SkyCellType",
         "kind": 8,
         "kindString": "Enumeration",
@@ -24,7 +24,7 @@
         },
         "children": [
           {
-            "id": 380,
+            "id": 543,
             "name": "Autocomplete",
             "kind": 16,
             "kindString": "Enumeration member",
@@ -34,7 +34,7 @@
             },
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts",
                 "line": 16,
                 "character": 2
               }
@@ -42,7 +42,7 @@
             "defaultValue": "\"skyCellAutocomplete\""
           },
           {
-            "id": 381,
+            "id": 544,
             "name": "Currency",
             "kind": 16,
             "kindString": "Enumeration member",
@@ -52,7 +52,7 @@
             },
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts",
                 "line": 26,
                 "character": 2
               }
@@ -60,7 +60,7 @@
             "defaultValue": "\"skyCellCurrency\""
           },
           {
-            "id": 382,
+            "id": 545,
             "name": "CurrencyValidator",
             "kind": 16,
             "kindString": "Enumeration member",
@@ -70,7 +70,7 @@
             },
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts",
                 "line": 32,
                 "character": 2
               }
@@ -78,7 +78,7 @@
             "defaultValue": "\"skyCellCurrencyValidator\""
           },
           {
-            "id": 383,
+            "id": 546,
             "name": "Date",
             "kind": 16,
             "kindString": "Enumeration member",
@@ -88,7 +88,7 @@
             },
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts",
                 "line": 42,
                 "character": 2
               }
@@ -96,14 +96,14 @@
             "defaultValue": "\"skyCellDate\""
           },
           {
-            "id": 384,
+            "id": 547,
             "name": "Lookup",
             "kind": 16,
             "kindString": "Enumeration member",
             "flags": {},
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts",
                 "line": 43,
                 "character": 2
               }
@@ -111,7 +111,7 @@
             "defaultValue": "\"skyCellLookup\""
           },
           {
-            "id": 385,
+            "id": 548,
             "name": "Number",
             "kind": 16,
             "kindString": "Enumeration member",
@@ -121,7 +121,7 @@
             },
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts",
                 "line": 53,
                 "character": 2
               }
@@ -129,7 +129,7 @@
             "defaultValue": "\"skyCellNumber\""
           },
           {
-            "id": 386,
+            "id": 549,
             "name": "NumberValidator",
             "kind": 16,
             "kindString": "Enumeration member",
@@ -139,7 +139,7 @@
             },
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts",
                 "line": 59,
                 "character": 2
               }
@@ -147,7 +147,7 @@
             "defaultValue": "\"skyCellNumberValidator\""
           },
           {
-            "id": 387,
+            "id": 550,
             "name": "RowSelector",
             "kind": 16,
             "kindString": "Enumeration member",
@@ -157,7 +157,7 @@
             },
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts",
                 "line": 65,
                 "character": 2
               }
@@ -165,7 +165,7 @@
             "defaultValue": "\"skyCellRowSelector\""
           },
           {
-            "id": 388,
+            "id": 551,
             "name": "Text",
             "kind": 16,
             "kindString": "Enumeration member",
@@ -175,7 +175,7 @@
             },
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts",
                 "line": 75,
                 "character": 2
               }
@@ -183,7 +183,7 @@
             "defaultValue": "\"skyCellText\""
           },
           {
-            "id": 389,
+            "id": 552,
             "name": "Validator",
             "kind": 16,
             "kindString": "Enumeration member",
@@ -193,7 +193,7 @@
             },
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts",
                 "line": 81,
                 "character": 2
               }
@@ -206,29 +206,29 @@
             "title": "Enumeration members",
             "kind": 16,
             "children": [
-              380,
-              381,
-              382,
-              383,
-              384,
-              385,
-              386,
-              387,
-              388,
-              389
+              543,
+              544,
+              545,
+              546,
+              547,
+              548,
+              549,
+              550,
+              551,
+              552
             ]
           }
         ],
         "sources": [
           {
-            "fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
+            "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts",
             "line": 6,
             "character": 12
           }
         ]
       },
       {
-        "id": 306,
+        "id": 469,
         "name": "SkyAgGridModule",
         "kind": 128,
         "kindString": "Class",
@@ -238,6 +238,8 @@
             "name": "NgModule",
             "type": {
               "type": "reference",
+              "qualifiedName": "NgModuleDecorator",
+              "package": "@angular/core",
               "name": "NgModule"
             },
             "arguments": {
@@ -247,21 +249,21 @@
         ],
         "children": [
           {
-            "id": 307,
+            "id": 470,
             "name": "constructor",
             "kind": 512,
             "kindString": "Constructor",
             "flags": {},
             "signatures": [
               {
-                "id": 308,
+                "id": 471,
                 "name": "new SkyAgGridModule",
                 "kind": 16384,
                 "kindString": "Constructor signature",
                 "flags": {},
                 "type": {
                   "type": "reference",
-                  "id": 306,
+                  "id": 469,
                   "name": "SkyAgGridModule"
                 }
               }
@@ -273,20 +275,20 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              307
+              470
             ]
           }
         ],
         "sources": [
           {
-            "fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.module.ts",
+            "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid.module.ts",
             "line": 105,
             "character": 13
           }
         ]
       },
       {
-        "id": 309,
+        "id": 472,
         "name": "SkyAgGridService",
         "kind": 128,
         "kindString": "Class",
@@ -299,6 +301,8 @@
             "name": "Injectable",
             "type": {
               "type": "reference",
+              "qualifiedName": "InjectableDecorator",
+              "package": "@angular/core",
               "name": "Injectable"
             },
             "arguments": {
@@ -308,28 +312,28 @@
         ],
         "children": [
           {
-            "id": 310,
+            "id": 473,
             "name": "constructor",
             "kind": 512,
             "kindString": "Constructor",
             "flags": {},
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid.service.ts",
                 "line": 148,
                 "character": 2
               }
             ],
             "signatures": [
               {
-                "id": 311,
+                "id": 474,
                 "name": "new SkyAgGridService",
                 "kind": 16384,
                 "kindString": "Constructor signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 312,
+                    "id": 475,
                     "name": "agGridAdapterService",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -340,7 +344,7 @@
                     }
                   },
                   {
-                    "id": 313,
+                    "id": 476,
                     "name": "themeSvc",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -352,6 +356,8 @@
                         "name": "Optional",
                         "type": {
                           "type": "reference",
+                          "qualifiedName": "OptionalDecorator",
+                          "package": "@angular/core",
                           "name": "Optional"
                         },
                         "arguments": {}
@@ -363,7 +369,7 @@
                     }
                   },
                   {
-                    "id": 314,
+                    "id": 477,
                     "name": "resources",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -375,6 +381,8 @@
                         "name": "Optional",
                         "type": {
                           "type": "reference",
+                          "qualifiedName": "OptionalDecorator",
+                          "package": "@angular/core",
                           "name": "Optional"
                         },
                         "arguments": {}
@@ -388,14 +396,14 @@
                 ],
                 "type": {
                   "type": "reference",
-                  "id": 309,
+                  "id": 472,
                   "name": "SkyAgGridService"
                 }
               }
             ]
           },
           {
-            "id": 322,
+            "id": 485,
             "name": "getEditableGridOptions",
             "kind": 2048,
             "kindString": "Method",
@@ -404,14 +412,14 @@
             },
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid.service.ts",
                 "line": 189,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 323,
+                "id": 486,
                 "name": "getEditableGridOptions",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -422,7 +430,7 @@
                 },
                 "parameters": [
                   {
-                    "id": 324,
+                    "id": 487,
                     "name": "args",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -430,20 +438,22 @@
                     "comment": {},
                     "type": {
                       "type": "reference",
-                      "id": 399,
+                      "id": 562,
                       "name": "SkyGetGridOptionsArgs"
                     }
                   }
                 ],
                 "type": {
                   "type": "reference",
+                  "qualifiedName": "GridOptions",
+                  "package": "ag-grid-community",
                   "name": "GridOptions"
                 }
               }
             ]
           },
           {
-            "id": 319,
+            "id": 482,
             "name": "getGridOptions",
             "kind": 2048,
             "kindString": "Method",
@@ -452,14 +462,14 @@
             },
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid.service.ts",
                 "line": 174,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 320,
+                "id": 483,
                 "name": "getGridOptions",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -470,7 +480,7 @@
                 },
                 "parameters": [
                   {
-                    "id": 321,
+                    "id": 484,
                     "name": "args",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -478,20 +488,22 @@
                     "comment": {},
                     "type": {
                       "type": "reference",
-                      "id": 399,
+                      "id": 562,
                       "name": "SkyGetGridOptionsArgs"
                     }
                   }
                 ],
                 "type": {
                   "type": "reference",
+                  "qualifiedName": "GridOptions",
+                  "package": "ag-grid-community",
                   "name": "GridOptions"
                 }
               }
             ]
           },
           {
-            "id": 317,
+            "id": 480,
             "name": "ngOnDestroy",
             "kind": 2048,
             "kindString": "Method",
@@ -500,14 +512,14 @@
             },
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid.service.ts",
                 "line": 164,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 318,
+                "id": 481,
                 "name": "ngOnDestroy",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -533,22 +545,22 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              310
+              473
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              322,
-              319,
-              317
+              485,
+              482,
+              480
             ]
           }
         ],
         "sources": [
           {
-            "fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
+            "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid.service.ts",
             "line": 141,
             "character": 13
           }
@@ -556,19 +568,21 @@
         "implementedTypes": [
           {
             "type": "reference",
+            "qualifiedName": "OnDestroy",
+            "package": "@angular/core",
             "name": "OnDestroy"
           }
         ]
       },
       {
-        "id": 399,
+        "id": 562,
         "name": "SkyGetGridOptionsArgs",
         "kind": 256,
         "kindString": "Interface",
         "flags": {},
         "children": [
           {
-            "id": 400,
+            "id": 563,
             "name": "gridOptions",
             "kind": 1024,
             "kindString": "Property",
@@ -578,18 +592,20 @@
             },
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/types/sky-grid-options.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/types/sky-grid-options.ts",
                 "line": 7,
                 "character": 2
               }
             ],
             "type": {
               "type": "reference",
+              "qualifiedName": "GridOptions",
+              "package": "ag-grid-community",
               "name": "GridOptions"
             }
           },
           {
-            "id": 401,
+            "id": 564,
             "name": "locale",
             "kind": 1024,
             "kindString": "Property",
@@ -601,7 +617,7 @@
             },
             "sources": [
               {
-                "fileName": "projects/ag-grid/src/modules/ag-grid/types/sky-grid-options.ts",
+                "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/types/sky-grid-options.ts",
                 "line": 11,
                 "character": 2
               }
@@ -617,14 +633,14 @@
             "title": "Properties",
             "kind": 1024,
             "children": [
-              400,
-              401
+              563,
+              564
             ]
           }
         ],
         "sources": [
           {
-            "fileName": "projects/ag-grid/src/modules/ag-grid/types/sky-grid-options.ts",
+            "fileName": "libs/components/ag-grid/src/lib/modules/ag-grid/types/sky-grid-options.ts",
             "line": 3,
             "character": 17
           }
@@ -636,28 +652,28 @@
         "title": "Enumerations",
         "kind": 8,
         "children": [
-          379
+          542
         ]
       },
       {
         "title": "Classes",
         "kind": 128,
         "children": [
-          306,
-          309
+          469,
+          472
         ]
       },
       {
         "title": "Interfaces",
         "kind": 256,
         "children": [
-          399
+          562
         ]
       }
     ],
     "sources": [
       {
-        "fileName": "projects/ag-grid/src/public-api.ts",
+        "fileName": "libs/components/ag-grid/src/index.ts",
         "line": 2,
         "character": 0
       }
@@ -672,7 +688,7 @@
     {
       "fileName": "data-entry-grid-docs-demo-context-menu.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-context-menu.component.ts",
-      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo-context-menu',\n  templateUrl: './data-entry-grid-docs-demo-context-menu.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  private name: string = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.name = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n\n  public actionClicked(action: string): void {\n    alert(`${action} clicked for ${this.name}`);\n  }\n}\n"
+      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo-context-menu',\n  templateUrl: './data-entry-grid-docs-demo-context-menu.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  private name = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.name = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n\n  public actionClicked(action: string): void {\n    alert(`${action} clicked for ${this.name}`);\n  }\n}\n"
     },
     {
       "fileName": "data-entry-grid-docs-demo-data.ts",
@@ -692,7 +708,7 @@
     {
       "fileName": "data-entry-grid-docs-demo-edit-modal.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-edit-modal.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport {\n  SkyAgGridService,\n  SkyAutocompleteProperties,\n  SkyCellType,\n  SkyDatepickerProperties,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ICellEditorParams,\n  NewValueParams,\n  RowNode,\n} from 'ag-grid-community';\n\nimport {\n  SkyAgGridDemoRow,\n  SKY_DEPARTMENTS,\n  SKY_JOB_TITLES,\n} from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo-edit-modal',\n  templateUrl: './data-entry-grid-docs-demo-edit-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridEditModalComponent {\n  public columnDefs: ColDef[];\n  private gridApi: GridApi | undefined;\n  public gridData: SkyAgGridDemoRow[];\n  public gridOptions: GridOptions;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    public context: SkyDataEntryGridEditModalContext,\n    public instance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    this.columnDefs = [\n      {\n        field: 'name',\n        headerName: 'Name',\n      },\n      {\n        field: 'age',\n        headerName: 'Age',\n        type: SkyCellType.Number,\n        maxWidth: 100,\n        editable: true,\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        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyDatepickerProperties } => {\n          return { skyComponentProperties: { minDate: params.data.startDate } };\n        },\n      },\n      {\n        field: 'department',\n        headerName: 'Department',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAutocompleteProperties } => {\n          return {\n            skyComponentProperties: {\n              data: SKY_DEPARTMENTS,\n              selectionChange: (\n                change: SkyAutocompleteSelectionChange\n              ): void => {\n                this.departmentSelectionChange(change, params.node);\n              },\n            },\n          };\n        },\n        onCellValueChanged: (event: NewValueParams): void => {\n          if (event.newValue !== event.oldValue) {\n            this.clearJobTitle(event.node);\n          }\n        },\n      },\n      {\n        field: 'jobTitle',\n        headerName: 'Title',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAutocompleteProperties } => {\n          const selectedDepartment: string =\n            params.data &&\n            params.data.department &&\n            params.data.department.name;\n          let editParams: {\n            skyComponentProperties: SkyAutocompleteProperties;\n          } = { skyComponentProperties: { data: [] } };\n\n          if (selectedDepartment) {\n            editParams.skyComponentProperties.data =\n              SKY_JOB_TITLES[selectedDepartment];\n          }\n          return editParams;\n        },\n      },\n    ];\n    this.gridData = this.context.gridData;\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n    };\n    this.gridOptions = this.agGridService.getEditableGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetector.markForCheck();\n  }\n\n  private departmentSelectionChange(\n    change: SkyAutocompleteSelectionChange,\n    node: RowNode\n  ): void {\n    if (change.selectedItem && change.selectedItem !== node.data.department) {\n      this.clearJobTitle(node);\n    }\n  }\n\n  private clearJobTitle(node: RowNode | null): void {\n    if (node) {\n      node.data.jobTitle = undefined;\n      this.changeDetector.markForCheck();\n      if (this.gridApi) {\n        this.gridApi.refreshCells({ rowNodes: [node] });\n      }\n    }\n  }\n}\n"
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport {\n  SkyAgGridService,\n  SkyAutocompleteProperties,\n  SkyCellType,\n  SkyDatepickerProperties,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ICellEditorParams,\n  NewValueParams,\n  RowNode,\n} from 'ag-grid-community';\n\nimport {\n  SkyAgGridDemoRow,\n  SKY_DEPARTMENTS,\n  SKY_JOB_TITLES,\n} from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo-edit-modal',\n  templateUrl: './data-entry-grid-docs-demo-edit-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridEditModalComponent {\n  public columnDefs: ColDef[];\n  private gridApi: GridApi | undefined;\n  public gridData: SkyAgGridDemoRow[];\n  public gridOptions: GridOptions;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    public context: SkyDataEntryGridEditModalContext,\n    public instance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    this.columnDefs = [\n      {\n        field: 'name',\n        headerName: 'Name',\n      },\n      {\n        field: 'age',\n        headerName: 'Age',\n        type: SkyCellType.Number,\n        maxWidth: 100,\n        editable: true,\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        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyDatepickerProperties } => {\n          return { skyComponentProperties: { minDate: params.data.startDate } };\n        },\n      },\n      {\n        field: 'department',\n        headerName: 'Department',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAutocompleteProperties } => {\n          return {\n            skyComponentProperties: {\n              data: SKY_DEPARTMENTS,\n              selectionChange: (\n                change: SkyAutocompleteSelectionChange\n              ): void => {\n                this.departmentSelectionChange(change, params.node);\n              },\n            },\n          };\n        },\n        onCellValueChanged: (event: NewValueParams): void => {\n          if (event.newValue !== event.oldValue) {\n            this.clearJobTitle(event.node);\n          }\n        },\n      },\n      {\n        field: 'jobTitle',\n        headerName: 'Title',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAutocompleteProperties } => {\n          const selectedDepartment: string =\n            params.data &&\n            params.data.department &&\n            params.data.department.name;\n          const editParams: {\n            skyComponentProperties: SkyAutocompleteProperties;\n          } = { skyComponentProperties: { data: [] } };\n\n          if (selectedDepartment) {\n            editParams.skyComponentProperties.data =\n              SKY_JOB_TITLES[selectedDepartment];\n          }\n          return editParams;\n        },\n      },\n    ];\n    this.gridData = this.context.gridData;\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n    };\n    this.gridOptions = this.agGridService.getEditableGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetector.markForCheck();\n  }\n\n  private departmentSelectionChange(\n    change: SkyAutocompleteSelectionChange,\n    node: RowNode\n  ): void {\n    if (change.selectedItem && change.selectedItem !== node.data.department) {\n      this.clearJobTitle(node);\n    }\n  }\n\n  private clearJobTitle(node: RowNode | null): void {\n    if (node) {\n      node.data.jobTitle = undefined;\n      this.changeDetector.markForCheck();\n      if (this.gridApi) {\n        this.gridApi.refreshCells({ rowNodes: [node] });\n      }\n    }\n  }\n}\n"
     },
     {
       "fileName": "data-entry-grid-docs-demo.component.html",
@@ -702,7 +718,7 @@
     {
       "fileName": "data-entry-grid-docs-demo.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport { SkyCellType, SkyAgGridService } from '@skyux/ag-grid';\nimport { SkyModalService, SkyModalCloseArgs } from '@skyux/modals';\n\nimport {\n  GridApi,\n  GridReadyEvent,\n  GridOptions,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SkyDataEntryGridContextMenuComponent } from './data-entry-grid-docs-demo-context-menu.component';\nimport { SKY_AG_GRID_DEMO_DATA } from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\nimport { SkyDataEntryGridEditModalComponent } from './data-entry-grid-docs-demo-edit-modal.component';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo',\n  templateUrl: './data-entry-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridDemoComponent {\n  public gridData = SKY_AG_GRID_DEMO_DATA;\n  public columnDefs = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      colId: 'context',\n      headerName: '',\n      maxWidth: 50,\n      sortable: false,\n      cellRendererFramework: SkyDataEntryGridContextMenuComponent,\n    },\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      colId: 'validationCurrency',\n      field: 'validationCurrency',\n      headerName: 'Validation currency',\n      type: [SkyCellType.CurrencyValidator],\n    },\n    {\n      colId: 'validationDate',\n      field: 'validationDate',\n      headerName: 'Validation date',\n      type: [SkyCellType.Date, SkyCellType.Validator],\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n          validatorMessage: 'Please enter a future date',\n        },\n      },\n    },\n  ];\n\n  public gridApi: GridApi | undefined;\n  public gridOptions: GridOptions;\n  public searchText: string = '';\n  public noRowsTemplate: string;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private modalService: SkyModalService,\n    private changeDetection: ChangeDetectorRef\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n    };\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.changeDetection.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetection.markForCheck();\n  }\n\n  public openModal(): void {\n    const context = new SkyDataEntryGridEditModalContext();\n    context.gridData = this.gridData;\n\n    const options = {\n      providers: [\n        { provide: SkyDataEntryGridEditModalContext, useValue: context },\n      ],\n      ariaDescribedBy: 'docs-edit-grid-modal-content',\n      size: 'large',\n    };\n\n    const modalInstance = this.modalService.open(\n      SkyDataEntryGridEditModalComponent,\n      options\n    );\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'cancel' || result.reason === 'close') {\n        alert('Edits canceled!');\n      } else {\n        this.gridData = result.data;\n        if (this.gridApi) {\n          this.gridApi.refreshCells();\n        }\n        alert('Saving data!');\n      }\n    });\n  }\n\n  public searchApplied(searchText: string | void): void {\n    if (searchText) {\n      this.searchText = searchText;\n    } else {\n      this.searchText = '';\n    }\n    if (this.gridApi) {\n      this.gridApi.setQuickFilter(searchText);\n      let displayedRowCount = this.gridApi.getDisplayedRowCount();\n      if (displayedRowCount > 0) {\n        this.gridApi.hideOverlay();\n      } else {\n        this.gridApi.showNoRowsOverlay();\n      }\n    }\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"
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport { SkyCellType, SkyAgGridService } from '@skyux/ag-grid';\nimport { SkyModalService, SkyModalCloseArgs } from '@skyux/modals';\n\nimport {\n  GridApi,\n  GridReadyEvent,\n  GridOptions,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SkyDataEntryGridContextMenuComponent } from './data-entry-grid-docs-demo-context-menu.component';\nimport { SKY_AG_GRID_DEMO_DATA } from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\nimport { SkyDataEntryGridEditModalComponent } from './data-entry-grid-docs-demo-edit-modal.component';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo',\n  templateUrl: './data-entry-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridDemoComponent {\n  public gridData = SKY_AG_GRID_DEMO_DATA;\n  public columnDefs = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      colId: 'context',\n      headerName: '',\n      maxWidth: 50,\n      sortable: false,\n      cellRendererFramework: SkyDataEntryGridContextMenuComponent,\n    },\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      colId: 'validationCurrency',\n      field: 'validationCurrency',\n      headerName: 'Validation currency',\n      type: [SkyCellType.CurrencyValidator],\n    },\n    {\n      colId: 'validationDate',\n      field: 'validationDate',\n      headerName: 'Validation date',\n      type: [SkyCellType.Date, SkyCellType.Validator],\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n          validatorMessage: 'Please enter a future date',\n        },\n      },\n    },\n  ];\n\n  public gridApi: GridApi | undefined;\n  public gridOptions: GridOptions;\n  public searchText = '';\n  public noRowsTemplate: string;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private modalService: SkyModalService,\n    private changeDetection: ChangeDetectorRef\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n    };\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.changeDetection.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetection.markForCheck();\n  }\n\n  public openModal(): void {\n    const context = new SkyDataEntryGridEditModalContext();\n    context.gridData = this.gridData;\n\n    const options = {\n      providers: [\n        { provide: SkyDataEntryGridEditModalContext, useValue: context },\n      ],\n      ariaDescribedBy: 'docs-edit-grid-modal-content',\n      size: 'large',\n    };\n\n    const modalInstance = this.modalService.open(\n      SkyDataEntryGridEditModalComponent,\n      options\n    );\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'cancel' || result.reason === 'close') {\n        alert('Edits canceled!');\n      } else {\n        this.gridData = result.data;\n        if (this.gridApi) {\n          this.gridApi.refreshCells();\n        }\n        alert('Saving data!');\n      }\n    });\n  }\n\n  public searchApplied(searchText: string | void): void {\n    if (searchText) {\n      this.searchText = searchText;\n    } else {\n      this.searchText = '';\n    }\n    if (this.gridApi) {\n      this.gridApi.setQuickFilter(searchText);\n      const displayedRowCount = this.gridApi.getDisplayedRowCount();\n      if (displayedRowCount > 0) {\n        this.gridApi.hideOverlay();\n      } else {\n        this.gridApi.showNoRowsOverlay();\n      }\n    }\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-entry-grid-docs-demo.module.ts",
@@ -717,7 +733,7 @@
     {
       "fileName": "data-manager-data-entry-grid-docs-demo-context-menu.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-context-menu.component.ts",
-      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-context-menu',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-context-menu.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataManagerDataEntryGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  private name: string = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.name = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n\n  public actionClicked(action: string): void {\n    alert(`${action} clicked for ${this.name}`);\n  }\n}\n"
+      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-context-menu',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-context-menu.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataManagerDataEntryGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  private name = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.name = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n\n  public actionClicked(action: string): void {\n    alert(`${action} clicked for ${this.name}`);\n  }\n}\n"
     },
     {
       "fileName": "data-manager-data-entry-grid-docs-demo-data.ts",
@@ -737,7 +753,7 @@
     {
       "fileName": "data-manager-data-entry-grid-docs-demo-edit-modal.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-edit-modal.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport {\n  SkyAgGridService,\n  SkyAutocompleteProperties,\n  SkyCellType,\n  SkyDatepickerProperties,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n  CellValueChangedEvent,\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ICellEditorParams,\n  NewValueParams,\n  RowNode,\n} from 'ag-grid-community';\n\nimport {\n  SkyAgGridDemoRow,\n  SKY_DEPARTMENTS,\n  SKY_JOB_TITLES,\n} from './data-manager-data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-manager-data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-edit-modal',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-edit-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataManagerDataEntryGridEditModalComponent {\n  public columnDefs: ColDef[];\n  private gridApi: GridApi | undefined;\n  public gridData: SkyAgGridDemoRow[];\n  public gridOptions: GridOptions;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    public context: SkyDataEntryGridEditModalContext,\n    public instance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    this.columnDefs = [\n      {\n        field: 'name',\n        headerName: 'Name',\n      },\n      {\n        field: 'age',\n        headerName: 'Age',\n        type: SkyCellType.Number,\n        maxWidth: 100,\n        editable: true,\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        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyDatepickerProperties } => {\n          return { skyComponentProperties: { minDate: params.data.startDate } };\n        },\n      },\n      {\n        field: 'department',\n        headerName: 'Department',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAutocompleteProperties } => {\n          return {\n            skyComponentProperties: {\n              data: SKY_DEPARTMENTS,\n              selectionChange: (\n                change: SkyAutocompleteSelectionChange\n              ): void => {\n                this.departmentSelectionChange(change, params.node);\n              },\n            },\n          };\n        },\n        onCellValueChanged: (event: NewValueParams): void => {\n          if (event.newValue !== event.oldValue) {\n            this.clearJobTitle(event.node);\n          }\n        },\n      },\n      {\n        field: 'jobTitle',\n        headerName: 'Title',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAutocompleteProperties } => {\n          const selectedDepartment: string =\n            params.data &&\n            params.data.department &&\n            params.data.department.name;\n          let editParams: {\n            skyComponentProperties: SkyAutocompleteProperties;\n          } = { skyComponentProperties: { data: [] } };\n\n          if (selectedDepartment) {\n            editParams.skyComponentProperties.data =\n              SKY_JOB_TITLES[selectedDepartment];\n          }\n          return editParams;\n        },\n      },\n    ];\n    this.gridData = this.context.gridData;\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n    };\n    this.gridOptions = this.agGridService.getEditableGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetector.markForCheck();\n  }\n\n  private departmentSelectionChange(\n    change: SkyAutocompleteSelectionChange,\n    node: RowNode\n  ): void {\n    if (change.selectedItem && change.selectedItem !== node.data.department) {\n      this.clearJobTitle(node);\n    }\n  }\n\n  private clearJobTitle(node: RowNode | null): void {\n    if (node) {\n      node.data.jobTitle = undefined;\n      if (this.gridApi) {\n        this.gridApi.refreshCells({ rowNodes: [node] });\n      }\n    }\n    this.changeDetector.markForCheck();\n  }\n}\n"
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport {\n  SkyAgGridService,\n  SkyAutocompleteProperties,\n  SkyCellType,\n  SkyDatepickerProperties,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n  CellValueChangedEvent,\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ICellEditorParams,\n  NewValueParams,\n  RowNode,\n} from 'ag-grid-community';\n\nimport {\n  SkyAgGridDemoRow,\n  SKY_DEPARTMENTS,\n  SKY_JOB_TITLES,\n} from './data-manager-data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-manager-data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-edit-modal',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-edit-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataManagerDataEntryGridEditModalComponent {\n  public columnDefs: ColDef[];\n  private gridApi: GridApi | undefined;\n  public gridData: SkyAgGridDemoRow[];\n  public gridOptions: GridOptions;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    public context: SkyDataEntryGridEditModalContext,\n    public instance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    this.columnDefs = [\n      {\n        field: 'name',\n        headerName: 'Name',\n      },\n      {\n        field: 'age',\n        headerName: 'Age',\n        type: SkyCellType.Number,\n        maxWidth: 100,\n        editable: true,\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        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyDatepickerProperties } => {\n          return { skyComponentProperties: { minDate: params.data.startDate } };\n        },\n      },\n      {\n        field: 'department',\n        headerName: 'Department',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAutocompleteProperties } => {\n          return {\n            skyComponentProperties: {\n              data: SKY_DEPARTMENTS,\n              selectionChange: (\n                change: SkyAutocompleteSelectionChange\n              ): void => {\n                this.departmentSelectionChange(change, params.node);\n              },\n            },\n          };\n        },\n        onCellValueChanged: (event: NewValueParams): void => {\n          if (event.newValue !== event.oldValue) {\n            this.clearJobTitle(event.node);\n          }\n        },\n      },\n      {\n        field: 'jobTitle',\n        headerName: 'Title',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAutocompleteProperties } => {\n          const selectedDepartment: string =\n            params.data &&\n            params.data.department &&\n            params.data.department.name;\n          const editParams: {\n            skyComponentProperties: SkyAutocompleteProperties;\n          } = { skyComponentProperties: { data: [] } };\n\n          if (selectedDepartment) {\n            editParams.skyComponentProperties.data =\n              SKY_JOB_TITLES[selectedDepartment];\n          }\n          return editParams;\n        },\n      },\n    ];\n    this.gridData = this.context.gridData;\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n    };\n    this.gridOptions = this.agGridService.getEditableGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetector.markForCheck();\n  }\n\n  private departmentSelectionChange(\n    change: SkyAutocompleteSelectionChange,\n    node: RowNode\n  ): void {\n    if (change.selectedItem && change.selectedItem !== node.data.department) {\n      this.clearJobTitle(node);\n    }\n  }\n\n  private clearJobTitle(node: RowNode | null): void {\n    if (node) {\n      node.data.jobTitle = undefined;\n      if (this.gridApi) {\n        this.gridApi.refreshCells({ rowNodes: [node] });\n      }\n    }\n    this.changeDetector.markForCheck();\n  }\n}\n"
     },
     {
       "fileName": "data-manager-data-entry-grid-docs-demo-filter-modal.component.html",
@@ -747,7 +763,7 @@
     {
       "fileName": "data-manager-data-entry-grid-docs-demo-filter-modal.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-filter-modal.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport {\n  SkyDataManagerFilterData,\n  SkyDataManagerFilterModalContext,\n} from '@skyux/data-manager';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-filter-modal',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-filter-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoFiltersModalComponent {\n  public jobTitle: string = '';\n\n  public hideSales: boolean = false;\n\n  constructor(\n    public context: SkyDataManagerFilterModalContext,\n    public instance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    if (this.context.filterData && this.context.filterData.filters) {\n      let filters = this.context.filterData.filters;\n      this.jobTitle = filters.jobTitle || 'any';\n      this.hideSales = filters.hideSales || false;\n    }\n    this.changeDetector.markForCheck();\n  }\n\n  public applyFilters() {\n    let result: SkyDataManagerFilterData = {};\n\n    result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;\n    result.filters = {\n      jobTitle: this.jobTitle,\n      hideSales: this.hideSales,\n    };\n    this.changeDetector.markForCheck();\n\n    this.instance.save(result);\n  }\n\n  public clearAllFilters() {\n    this.hideSales = false;\n    this.jobTitle = 'any';\n    this.changeDetector.markForCheck();\n  }\n\n  public cancel() {\n    this.instance.cancel();\n  }\n}\n"
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport {\n  SkyDataManagerFilterData,\n  SkyDataManagerFilterModalContext,\n} from '@skyux/data-manager';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-filter-modal',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-filter-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoFiltersModalComponent {\n  public jobTitle = '';\n\n  public hideSales = false;\n\n  constructor(\n    public context: SkyDataManagerFilterModalContext,\n    public instance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    if (this.context.filterData && this.context.filterData.filters) {\n      const filters = this.context.filterData.filters;\n      this.jobTitle = filters.jobTitle || 'any';\n      this.hideSales = filters.hideSales || false;\n    }\n    this.changeDetector.markForCheck();\n  }\n\n  public applyFilters() {\n    const result: SkyDataManagerFilterData = {};\n\n    result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;\n    result.filters = {\n      jobTitle: this.jobTitle,\n      hideSales: this.hideSales,\n    };\n    this.changeDetector.markForCheck();\n\n    this.instance.save(result);\n  }\n\n  public clearAllFilters() {\n    this.hideSales = false;\n    this.jobTitle = 'any';\n    this.changeDetector.markForCheck();\n  }\n\n  public cancel() {\n    this.instance.cancel();\n  }\n}\n"
     },
     {
       "fileName": "data-manager-data-entry-grid-docs-demo-view-grid.component.html",
@@ -757,7 +773,7 @@
     {
       "fileName": "data-manager-data-entry-grid-docs-demo-view-grid.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-view-grid.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerState,\n  SkyDataViewConfig,\n  SkyDataManagerService,\n} from '@skyux/data-manager';\n\nimport {\n  ColDef,\n  ColumnApi,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  RowSelectedEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-view-grid',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoViewGridComponent\n  implements OnInit\n{\n  @Input()\n  public set items(value: any[]) {\n    this._items = value;\n    this.changeDetector.markForCheck();\n    if (this.gridApi) {\n      this.gridApi.refreshCells();\n    }\n  }\n\n  public viewId = 'dataEntryGridWithDataManagerView';\n\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\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      field: 'validationCurrency',\n      headerName: 'Validation currency',\n      type: [SkyCellType.CurrencyValidator],\n    },\n    {\n      field: 'validationDate',\n      headerName: 'Validation date',\n      type: [SkyCellType.Date, SkyCellType.Validator],\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n          validatorMessage: 'Please enter a future date',\n        },\n      },\n    },\n  ];\n\n  public dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: any[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate: string;\n  public isActive: boolean = false;\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Data Grid View',\n    icon: 'table',\n    searchEnabled: true,\n    sortEnabled: true,\n    multiselectToolbarEnabled: true,\n    columnPickerEnabled: true,\n    filterButtonEnabled: true,\n    columnOptions: [\n      {\n        id: 'selected',\n        label: 'selected',\n        alwaysDisplayed: true,\n      },\n      {\n        id: 'name',\n        label: 'Name',\n        description: 'The name of the employee.',\n      },\n      {\n        id: 'age',\n        label: 'Age',\n        description: 'The age of the employee.',\n      },\n      {\n        id: 'startDate',\n        label: 'Start date',\n        description: 'The start date of the employee.',\n      },\n      {\n        id: 'endDate',\n        label: 'End date',\n        description: 'The end date of the employee.',\n      },\n      {\n        id: 'department',\n        label: 'Department',\n        description: 'The department of the employee',\n      },\n      {\n        id: 'jobTitle',\n        label: 'Title',\n        description: 'The job title of the employee.',\n      },\n      {\n        id: 'validationCurrency',\n        label: 'Validation currency',\n        description: 'An example column for currency validation.',\n      },\n      {\n        id: 'validationDate',\n        label: 'Validation date',\n        description: 'An example column for date validation.',\n      },\n    ],\n  };\n\n  private _items: any[] = [];\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n  }\n\n  public ngOnInit(): void {\n    this.displayedItems = this._items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.setInitialColumnOrder();\n        this.updateData();\n        this.changeDetector.detectChanges();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isActive = id === this.viewId;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public updateData(): void {\n    this.sortItems();\n    this.displayedItems = this.filterItems(this.searchItems(this._items));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\n    }\n\n    if (this.displayedItems.length > 0) {\n      this.gridApi?.hideOverlay();\n    } else {\n      this.gridApi?.showNoRowsOverlay();\n    }\n\n    this.changeDetector.markForCheck();\n  }\n\n  public setInitialColumnOrder(): void {\n    let viewState = this.dataState.getViewStateById(this.viewId);\n    let visibleColumns = viewState.displayedColumnIds;\n\n    this.columnDefs.sort((col1, col2) => {\n      let col1Index = visibleColumns.findIndex(\n        (colId: string) => colId === col1.colId\n      );\n      let col2Index = visibleColumns.findIndex(\n        (colId: string) => colId === col2.colId\n      );\n\n      if (col1Index === -1) {\n        col1.hide = true;\n        return 0;\n      } else if (col2Index === -1) {\n        col2.hide = true;\n        return 0;\n      } else {\n        return col1Index - col2Index;\n      }\n    });\n\n    this.gridInitialized = true;\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.columnApi = gridReadyEvent.columnApi;\n    this.updateData();\n    this.changeDetector.markForCheck();\n  }\n\n  public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n    if (!rowSelectedEvent.data.selected) {\n      this.updateData();\n    }\n  }\n\n  public sortItems(): void {\n    let sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      this.columnApi.applyColumnState({\n        state: [\n          {\n            colId: sortOption.propertyName,\n            sort: sortOption.descending ? 'desc' : 'asc',\n          },\n        ],\n      });\n    }\n  }\n\n  public searchItems(items: any[]): any[] {\n    let searchedItems = items;\n    let searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: any) {\n        let property: any;\n\n        for (property in item) {\n          if (\n            item.hasOwnProperty(property) &&\n            (property === 'name' || property === 'description')\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n\n        return false;\n      });\n    }\n\n    return searchedItems;\n  }\n\n  public filterItems(items: any[]): any[] {\n    let filteredItems = items;\n    let filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      let filters = filterData.filters;\n      filteredItems = items.filter((item: any) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\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"
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerState,\n  SkyDataViewConfig,\n  SkyDataManagerService,\n} from '@skyux/data-manager';\n\nimport {\n  ColDef,\n  ColumnApi,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  RowSelectedEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-view-grid',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoViewGridComponent\n  implements OnInit\n{\n  @Input()\n  public set items(value: any[]) {\n    this._items = value;\n    this.changeDetector.markForCheck();\n    if (this.gridApi) {\n      this.gridApi.refreshCells();\n    }\n  }\n\n  public viewId = 'dataEntryGridWithDataManagerView';\n\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\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      field: 'validationCurrency',\n      headerName: 'Validation currency',\n      type: [SkyCellType.CurrencyValidator],\n    },\n    {\n      field: 'validationDate',\n      headerName: 'Validation date',\n      type: [SkyCellType.Date, SkyCellType.Validator],\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n          validatorMessage: 'Please enter a future date',\n        },\n      },\n    },\n  ];\n\n  public dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: any[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate: string;\n  public isActive = false;\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Data Grid View',\n    icon: 'table',\n    searchEnabled: true,\n    sortEnabled: true,\n    multiselectToolbarEnabled: true,\n    columnPickerEnabled: true,\n    filterButtonEnabled: true,\n    columnOptions: [\n      {\n        id: 'selected',\n        label: 'selected',\n        alwaysDisplayed: true,\n      },\n      {\n        id: 'name',\n        label: 'Name',\n        description: 'The name of the employee.',\n      },\n      {\n        id: 'age',\n        label: 'Age',\n        description: 'The age of the employee.',\n      },\n      {\n        id: 'startDate',\n        label: 'Start date',\n        description: 'The start date of the employee.',\n      },\n      {\n        id: 'endDate',\n        label: 'End date',\n        description: 'The end date of the employee.',\n      },\n      {\n        id: 'department',\n        label: 'Department',\n        description: 'The department of the employee',\n      },\n      {\n        id: 'jobTitle',\n        label: 'Title',\n        description: 'The job title of the employee.',\n      },\n      {\n        id: 'validationCurrency',\n        label: 'Validation currency',\n        description: 'An example column for currency validation.',\n      },\n      {\n        id: 'validationDate',\n        label: 'Validation date',\n        description: 'An example column for date validation.',\n      },\n    ],\n  };\n\n  private _items: any[] = [];\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n  }\n\n  public ngOnInit(): void {\n    this.displayedItems = this._items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.setInitialColumnOrder();\n        this.updateData();\n        this.changeDetector.detectChanges();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isActive = id === this.viewId;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public updateData(): void {\n    this.sortItems();\n    this.displayedItems = this.filterItems(this.searchItems(this._items));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\n    }\n\n    if (this.displayedItems.length > 0) {\n      this.gridApi?.hideOverlay();\n    } else {\n      this.gridApi?.showNoRowsOverlay();\n    }\n\n    this.changeDetector.markForCheck();\n  }\n\n  public setInitialColumnOrder(): void {\n    const viewState = this.dataState.getViewStateById(this.viewId);\n    const visibleColumns = viewState.displayedColumnIds;\n\n    this.columnDefs.sort((col1, col2) => {\n      const col1Index = visibleColumns.findIndex(\n        (colId: string) => colId === col1.colId\n      );\n      const col2Index = visibleColumns.findIndex(\n        (colId: string) => colId === col2.colId\n      );\n\n      if (col1Index === -1) {\n        col1.hide = true;\n        return 0;\n      } else if (col2Index === -1) {\n        col2.hide = true;\n        return 0;\n      } else {\n        return col1Index - col2Index;\n      }\n    });\n\n    this.gridInitialized = true;\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.columnApi = gridReadyEvent.columnApi;\n    this.updateData();\n    this.changeDetector.markForCheck();\n  }\n\n  public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n    if (!rowSelectedEvent.data.selected) {\n      this.updateData();\n    }\n  }\n\n  public sortItems(): void {\n    const sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      this.columnApi.applyColumnState({\n        state: [\n          {\n            colId: sortOption.propertyName,\n            sort: sortOption.descending ? 'desc' : 'asc',\n          },\n        ],\n      });\n    }\n  }\n\n  public searchItems(items: any[]): any[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: any) {\n        let property: any;\n\n        for (property in item) {\n          if (\n            item.hasOwnProperty(property) &&\n            (property === 'name' || property === 'description')\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n\n        return false;\n      });\n    }\n\n    return searchedItems;\n  }\n\n  public filterItems(items: any[]): any[] {\n    let filteredItems = items;\n    const filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      const filters = filterData.filters;\n      filteredItems = items.filter((item: any) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\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-manager-data-entry-grid-docs-demo.component.html",
@@ -787,7 +803,7 @@
     {
       "fileName": "basic-data-grid-docs-demo.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport { SkyCellType, SkyAgGridService } from '@skyux/ag-grid';\n\nimport {\n  GridApi,\n  GridReadyEvent,\n  GridOptions,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './basic-data-grid-docs-demo-data';\n\n@Component({\n  selector: 'app-basic-data-grid-docs-demo',\n  templateUrl: './basic-data-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyBasicDataGridDemoComponent {\n  public columnDefs = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\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: string = '';\n  public noRowsTemplate: string;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetector.markForCheck();\n  }\n\n  public searchApplied(searchText: string | void): void {\n    if (searchText) {\n      this.searchText = searchText;\n    } else {\n      this.searchText = '';\n    }\n    if (this.gridApi) {\n      this.gridApi.setQuickFilter(searchText);\n      let displayedRowCount = this.gridApi.getDisplayedRowCount();\n      if (displayedRowCount > 0) {\n        this.gridApi.hideOverlay();\n      } else {\n        this.gridApi.showNoRowsOverlay();\n      }\n    }\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"
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport { SkyCellType, SkyAgGridService } from '@skyux/ag-grid';\n\nimport {\n  GridApi,\n  GridReadyEvent,\n  GridOptions,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './basic-data-grid-docs-demo-data';\n\n@Component({\n  selector: 'app-basic-data-grid-docs-demo',\n  templateUrl: './basic-data-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyBasicDataGridDemoComponent {\n  public columnDefs = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\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  public noRowsTemplate: string;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetector.markForCheck();\n  }\n\n  public searchApplied(searchText: string | void): void {\n    if (searchText) {\n      this.searchText = searchText;\n    } else {\n      this.searchText = '';\n    }\n    if (this.gridApi) {\n      this.gridApi.setQuickFilter(searchText);\n      const displayedRowCount = this.gridApi.getDisplayedRowCount();\n      if (displayedRowCount > 0) {\n        this.gridApi.hideOverlay();\n      } else {\n        this.gridApi.showNoRowsOverlay();\n      }\n    }\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": "basic-data-grid-docs-demo.module.ts",
@@ -807,7 +823,7 @@
     {
       "fileName": "data-manager-data-grid-docs-demo-filter-modal.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo-filter-modal.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport {\n  SkyDataManagerFilterData,\n  SkyDataManagerFilterModalContext,\n} from '@skyux/data-manager';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n  selector: 'app-data-manager-data-grid-docs-demo-filter-modal',\n  templateUrl: './data-manager-data-grid-docs-demo-filter-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridDocsDemoFiltersModalComponent {\n  public jobTitle: string = '';\n\n  public hideSales: boolean = false;\n\n  constructor(\n    public context: SkyDataManagerFilterModalContext,\n    public instance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    if (this.context.filterData && this.context.filterData.filters) {\n      let filters = this.context.filterData.filters;\n      this.jobTitle = filters.jobTitle || 'any';\n      this.hideSales = filters.hideSales || false;\n    }\n    this.changeDetector.markForCheck();\n  }\n\n  public applyFilters() {\n    let result: SkyDataManagerFilterData = {};\n\n    result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;\n    result.filters = {\n      jobTitle: this.jobTitle,\n      hideSales: this.hideSales,\n    };\n    this.changeDetector.markForCheck();\n\n    this.instance.save(result);\n  }\n\n  public clearAllFilters() {\n    this.hideSales = false;\n    this.jobTitle = 'any';\n    this.changeDetector.markForCheck();\n  }\n\n  public cancel() {\n    this.instance.cancel();\n  }\n}\n"
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport {\n  SkyDataManagerFilterData,\n  SkyDataManagerFilterModalContext,\n} from '@skyux/data-manager';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n  selector: 'app-data-manager-data-grid-docs-demo-filter-modal',\n  templateUrl: './data-manager-data-grid-docs-demo-filter-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridDocsDemoFiltersModalComponent {\n  public jobTitle = '';\n\n  public hideSales = false;\n\n  constructor(\n    public context: SkyDataManagerFilterModalContext,\n    public instance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    if (this.context.filterData && this.context.filterData.filters) {\n      const filters = this.context.filterData.filters;\n      this.jobTitle = filters.jobTitle || 'any';\n      this.hideSales = filters.hideSales || false;\n    }\n    this.changeDetector.markForCheck();\n  }\n\n  public applyFilters() {\n    const result: SkyDataManagerFilterData = {};\n\n    result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;\n    result.filters = {\n      jobTitle: this.jobTitle,\n      hideSales: this.hideSales,\n    };\n    this.changeDetector.markForCheck();\n\n    this.instance.save(result);\n  }\n\n  public clearAllFilters() {\n    this.hideSales = false;\n    this.jobTitle = 'any';\n    this.changeDetector.markForCheck();\n  }\n\n  public cancel() {\n    this.instance.cancel();\n  }\n}\n"
     },
     {
       "fileName": "data-manager-data-grid-docs-demo-view-grid.component.html",
@@ -817,7 +833,7 @@
     {
       "fileName": "data-manager-data-grid-docs-demo-view-grid.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo-view-grid.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerState,\n  SkyDataViewConfig,\n  SkyDataManagerService,\n} from '@skyux/data-manager';\n\nimport {\n  ColDef,\n  ColumnApi,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  RowSelectedEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-manager-data-grid-docs-demo-view-grid',\n  templateUrl: './data-manager-data-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridsDocsDemoViewGridComponent implements OnInit {\n  @Input()\n  public items: any[] = [];\n\n  public viewId = 'dataGridWithDataManagerView';\n\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\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 dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: any[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate: string;\n  public isActive: boolean = false;\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Data Grid View',\n    icon: 'table',\n    searchEnabled: true,\n    sortEnabled: true,\n    multiselectToolbarEnabled: true,\n    columnPickerEnabled: true,\n    filterButtonEnabled: true,\n    columnOptions: [\n      {\n        id: 'selected',\n        label: 'selected',\n        alwaysDisplayed: true,\n      },\n      {\n        id: 'name',\n        label: 'Name',\n        description: 'The name of the employee.',\n      },\n      {\n        id: 'age',\n        label: 'Age',\n        description: 'The age of the employee.',\n      },\n      {\n        id: 'startDate',\n        label: 'Start date',\n        description: 'The start date of the employee.',\n      },\n      {\n        id: 'endDate',\n        label: 'End date',\n        description: 'The end date of the employee.',\n      },\n      {\n        id: 'department',\n        label: 'Department',\n        description: 'The department of the employee',\n      },\n      {\n        id: 'jobTitle',\n        label: 'Title',\n        description: 'The job title of the employee.',\n      },\n    ],\n  };\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n  }\n\n  public ngOnInit(): void {\n    this.displayedItems = this.items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.setInitialColumnOrder();\n        this.updateData();\n        this.changeDetector.detectChanges();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isActive = id === this.viewId;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public updateData(): void {\n    this.sortItems();\n    this.displayedItems = this.filterItems(this.searchItems(this.items));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\n    }\n\n    if (this.displayedItems.length > 0) {\n      this.gridApi?.hideOverlay();\n    } else {\n      this.gridApi?.showNoRowsOverlay();\n    }\n\n    this.changeDetector.markForCheck();\n  }\n\n  public setInitialColumnOrder(): void {\n    let viewState = this.dataState.getViewStateById(this.viewId);\n    let visibleColumns = viewState.displayedColumnIds;\n\n    this.columnDefs.sort((col1, col2) => {\n      let col1Index = visibleColumns.findIndex(\n        (colId: string) => colId === col1.colId\n      );\n      let col2Index = visibleColumns.findIndex(\n        (colId: string) => colId === col2.colId\n      );\n\n      if (col1Index === -1) {\n        col1.hide = true;\n        return 0;\n      } else if (col2Index === -1) {\n        col2.hide = true;\n        return 0;\n      } else {\n        return col1Index - col2Index;\n      }\n    });\n\n    this.gridInitialized = true;\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.columnApi = gridReadyEvent.columnApi;\n    this.updateData();\n    this.changeDetector.markForCheck();\n  }\n\n  public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n    if (!rowSelectedEvent.data.selected) {\n      this.updateData();\n    }\n  }\n\n  public sortItems(): void {\n    let sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      this.columnApi.applyColumnState({\n        state: [\n          {\n            colId: sortOption.propertyName,\n            sort: sortOption.descending ? 'desc' : 'asc',\n          },\n        ],\n      });\n    }\n  }\n\n  public searchItems(items: any[]): any[] {\n    let searchedItems = items;\n    let searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: any) {\n        let property: any;\n\n        for (property in item) {\n          if (\n            item.hasOwnProperty(property) &&\n            (property === 'name' || property === 'description')\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n        return false;\n      });\n    }\n    return searchedItems;\n  }\n\n  public filterItems(items: any[]): any[] {\n    let filteredItems = items;\n    let filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      let filters = filterData.filters;\n      filteredItems = items.filter((item: any) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\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"
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerState,\n  SkyDataViewConfig,\n  SkyDataManagerService,\n} from '@skyux/data-manager';\n\nimport {\n  ColDef,\n  ColumnApi,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  RowSelectedEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-manager-data-grid-docs-demo-view-grid',\n  templateUrl: './data-manager-data-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridsDocsDemoViewGridComponent implements OnInit {\n  @Input()\n  public items: any[] = [];\n\n  public viewId = 'dataGridWithDataManagerView';\n\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\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 dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: any[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate: string;\n  public isActive = false;\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Data Grid View',\n    icon: 'table',\n    searchEnabled: true,\n    sortEnabled: true,\n    multiselectToolbarEnabled: true,\n    columnPickerEnabled: true,\n    filterButtonEnabled: true,\n    columnOptions: [\n      {\n        id: 'selected',\n        label: 'selected',\n        alwaysDisplayed: true,\n      },\n      {\n        id: 'name',\n        label: 'Name',\n        description: 'The name of the employee.',\n      },\n      {\n        id: 'age',\n        label: 'Age',\n        description: 'The age of the employee.',\n      },\n      {\n        id: 'startDate',\n        label: 'Start date',\n        description: 'The start date of the employee.',\n      },\n      {\n        id: 'endDate',\n        label: 'End date',\n        description: 'The end date of the employee.',\n      },\n      {\n        id: 'department',\n        label: 'Department',\n        description: 'The department of the employee',\n      },\n      {\n        id: 'jobTitle',\n        label: 'Title',\n        description: 'The job title of the employee.',\n      },\n    ],\n  };\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n  }\n\n  public ngOnInit(): void {\n    this.displayedItems = this.items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.setInitialColumnOrder();\n        this.updateData();\n        this.changeDetector.detectChanges();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isActive = id === this.viewId;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public updateData(): void {\n    this.sortItems();\n    this.displayedItems = this.filterItems(this.searchItems(this.items));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\n    }\n\n    if (this.displayedItems.length > 0) {\n      this.gridApi?.hideOverlay();\n    } else {\n      this.gridApi?.showNoRowsOverlay();\n    }\n\n    this.changeDetector.markForCheck();\n  }\n\n  public setInitialColumnOrder(): void {\n    const viewState = this.dataState.getViewStateById(this.viewId);\n    const visibleColumns = viewState.displayedColumnIds;\n\n    this.columnDefs.sort((col1, col2) => {\n      const col1Index = visibleColumns.findIndex(\n        (colId: string) => colId === col1.colId\n      );\n      const col2Index = visibleColumns.findIndex(\n        (colId: string) => colId === col2.colId\n      );\n\n      if (col1Index === -1) {\n        col1.hide = true;\n        return 0;\n      } else if (col2Index === -1) {\n        col2.hide = true;\n        return 0;\n      } else {\n        return col1Index - col2Index;\n      }\n    });\n\n    this.gridInitialized = true;\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.columnApi = gridReadyEvent.columnApi;\n    this.updateData();\n    this.changeDetector.markForCheck();\n  }\n\n  public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n    if (!rowSelectedEvent.data.selected) {\n      this.updateData();\n    }\n  }\n\n  public sortItems(): void {\n    const sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      this.columnApi.applyColumnState({\n        state: [\n          {\n            colId: sortOption.propertyName,\n            sort: sortOption.descending ? 'desc' : 'asc',\n          },\n        ],\n      });\n    }\n  }\n\n  public searchItems(items: any[]): any[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: any) {\n        let property: any;\n\n        for (property in item) {\n          if (\n            item.hasOwnProperty(property) &&\n            (property === 'name' || property === 'description')\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n        return false;\n      });\n    }\n    return searchedItems;\n  }\n\n  public filterItems(items: any[]): any[] {\n    let filteredItems = items;\n    const filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      const filters = filterData.filters;\n      filteredItems = items.filter((item: any) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\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-manager-data-grid-docs-demo.component.html",
@@ -835,4 +851,4 @@
       "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { DataManagerDataGridDocsDemoFiltersModalComponent } from './data-manager-data-grid-docs-demo-filter-modal.component';\nimport { DataManagerDataGridsDocsDemoViewGridComponent } from './data-manager-data-grid-docs-demo-view-grid.component';\nimport { SkyDataManagerDataGridDemoComponent } from './data-manager-data-grid-docs-demo.component';\n\n@NgModule({\n  declarations: [\n    SkyDataManagerDataGridDemoComponent,\n    DataManagerDataGridDocsDemoFiltersModalComponent,\n    DataManagerDataGridsDocsDemoViewGridComponent,\n  ],\n  entryComponents: [DataManagerDataGridDocsDemoFiltersModalComponent],\n  exports: [SkyDataManagerDataGridDemoComponent],\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n    SkyDataManagerModule,\n    SkyModalModule,\n    SkyCheckboxModule,\n  ],\n})\nexport class SkyDataManagerDataGridDocsDemoModule {}\n"
     }
   ]
-}
+}