@skyux/ag-grid 5.1.4 → 5.1.8

package/css/sky-ag-grid.css

@@ -7997,7 +7997,8 @@ ag-grid-angular:not(.sky-ag-grid-editable) input[class^=ag-][type=range]:disable
 ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell:not(.ag-cell-wrap-text) .ag-cell-wrapper {
   align-items: flex-start;
 }
-ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell.ag-cell-wrap-text {
+ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell.ag-cell-wrap-text span.ag-cell-value {
+  display: block;
   min-height: 36px;
   line-height: 1.428571429;
   padding-top: 7px;
@@ -12850,6 +12851,13 @@ ag-grid-angular.sky-ag-grid-editable .ag-row.ag-row-focus .ag-cell-focus {
 ag-grid-angular.sky-ag-grid-editable .ag-cell:not(.ag-cell-wrap-text) .ag-cell-wrapper {
   align-items: flex-start;
 }
+ag-grid-angular.sky-ag-grid-editable .ag-cell.ag-cell-wrap-text span.ag-cell-value {
+  display: block;
+  min-height: 36px;
+  line-height: 1.428571429;
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
 ag-grid-angular.sky-ag-grid-editable .ag-cell {
   border-block-end: none;
   border-block-start: none;
@@ -12869,6 +12877,7 @@ ag-grid-angular.sky-ag-grid-editable .sky-ag-grid-cell-uneditable {
 }
 ag-grid-angular.sky-ag-grid-editable .ag-popup .ag-popup-editor {
   border: none;
+  background-color: #ffffff;
 }
 ag-grid-angular.sky-ag-grid-editable .ag-popup .ag-select-list {
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
@@ -17697,6 +17706,13 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
 .sky-theme-modern:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell:not(.ag-cell-wrap-text) .ag-cell-wrapper {
   align-items: flex-start;
 }
+.sky-theme-modern:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell.ag-cell-wrap-text span.ag-cell-value {
+  display: block;
+  min-height: 58px;
+  line-height: 1.5;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
 .sky-theme-modern:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell {
   padding-top: 1px;
   padding-bottom: 1px;
@@ -17711,12 +17727,6 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
 .sky-theme-modern:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell.sky-ag-grid-cell-invalid {
   border: 1px solid #ef4044;
 }
-.sky-theme-modern:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell.ag-cell-wrap-text {
-  min-height: 58px;
-  line-height: 1.5;
-  padding-top: 16px;
-  padding-bottom: 16px;
-}
 .sky-theme-modern:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-row:not(.ag-row-first) {
   border-top: none;
 }
@@ -22516,6 +22526,7 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
 }
 .sky-theme-modern ag-grid-angular.sky-ag-grid-editable .ag-popup .ag-popup-editor {
   border: none;
+  background-color: #fcfcfc;
 }
 .sky-theme-modern ag-grid-angular.sky-ag-grid-editable .ag-popup .ag-select-list {
   box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.3);
@@ -22534,6 +22545,13 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
 .sky-theme-modern ag-grid-angular.sky-ag-grid-editable .ag-cell:not(.ag-cell-wrap-text) .ag-cell-wrapper {
   align-items: flex-start;
 }
+.sky-theme-modern ag-grid-angular.sky-ag-grid-editable .ag-cell.ag-cell-wrap-text span.ag-cell-value {
+  display: block;
+  min-height: 58px;
+  line-height: 1.5;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
 .sky-theme-modern ag-grid-angular.sky-ag-grid-editable .ag-cell {
   padding-top: 1px;
   padding-bottom: 1px;
@@ -27368,6 +27386,13 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
 .sky-theme-modern.sky-theme-mode-dark:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-header-cell-text {
   text-transform: uppercase;
 }
+.sky-theme-modern.sky-theme-mode-dark:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell.ag-cell-wrap-text span.ag-cell-value {
+  display: block;
+  min-height: 58px;
+  line-height: 1.5;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
 .sky-theme-modern.sky-theme-mode-dark:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell:not(.ag-cell-wrap-text) .ag-cell-wrapper {
   align-items: flex-start;
 }
@@ -27385,7 +27410,8 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
 .sky-theme-modern.sky-theme-mode-dark:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell.sky-ag-grid-cell-invalid {
   border: 1px solid #ef4044;
 }
-.sky-theme-modern.sky-theme-mode-dark:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell.ag-cell-wrap-text {
+.sky-theme-modern.sky-theme-mode-dark:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell.ag-cell-wrap-text span.ag-cell-value {
+  display: block;
   min-height: 58px;
   line-height: 1.5;
   padding-top: 16px;
@@ -32189,6 +32215,13 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
 .sky-theme-modern.sky-theme-mode-dark ag-grid-angular.sky-ag-grid-editable .ag-cell:not(.ag-cell-wrap-text) .ag-cell-wrapper {
   align-items: flex-start;
 }
+.sky-theme-modern.sky-theme-mode-dark ag-grid-angular.sky-ag-grid-editable .ag-cell.ag-cell-wrap-text span.ag-cell-value {
+  display: block;
+  min-height: 58px;
+  line-height: 1.5;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
 .sky-theme-modern.sky-theme-mode-dark ag-grid-angular.sky-ag-grid-editable .ag-cell {
   padding-top: 1px;
   padding-bottom: 1px;
@@ -32221,6 +32254,7 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
 }
 .sky-theme-modern.sky-theme-mode-dark ag-grid-angular.sky-ag-grid-editable .ag-popup .ag-popup-editor {
   border: none;
+  background-color: #121212;
 }
 .sky-theme-modern.sky-theme-mode-dark ag-grid-angular.sky-ag-grid-editable .ag-popup .ag-select-list .ag-select-list-item {
   cursor: pointer;

package/documentation.json

@@ -663,5 +663,156 @@
       }
     ]
   },
-  "codeExamples": []
+  "codeExamples": [
+    {
+      "fileName": "data-entry-grid-docs-demo-context-menu.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-context-menu.component.html",
+      "rawContents": "<sky-dropdown buttonType=\"context-menu\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Delete')\">Delete</button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Mark inactive')\">\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('More info')\">\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "fileName": "data-entry-grid-docs-demo-data.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-data.ts",
+      "rawContents": "export interface SkyAutocompleteOption {\n  id: string;\n  name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n  {\n    id: '1',\n    name: 'Marketing',\n  },\n  {\n    id: '2',\n    name: 'Sales',\n  },\n  {\n    id: '3',\n    name: 'Engineering',\n  },\n  {\n    id: '4',\n    name: 'Customer Support',\n  },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n  Marketing: [\n    {\n      id: '1',\n      name: 'Social Media Coordinator',\n    },\n    {\n      id: '2',\n      name: 'Blog Manager',\n    },\n    {\n      id: '3',\n      name: 'Events Manager',\n    },\n  ],\n  Sales: [\n    {\n      id: '4',\n      name: 'Business Development Representative',\n    },\n    {\n      id: '5',\n      name: 'Account Executive',\n    },\n  ],\n  Engineering: [\n    {\n      id: '6',\n      name: 'Software Engineer',\n    },\n    {\n      id: '7',\n      name: 'Senior Software Engineer',\n    },\n    {\n      id: '8',\n      name: 'Principal Software Engineer',\n    },\n    {\n      id: '9',\n      name: 'UX Designer',\n    },\n    {\n      id: '10',\n      name: 'Product Manager',\n    },\n  ],\n  'Customer Support': [\n    {\n      id: '11',\n      name: 'Customer Support Representative',\n    },\n    {\n      id: '12',\n      name: 'Account Manager',\n    },\n    {\n      id: '13',\n      name: 'Customer Support Specialist',\n    },\n  ],\n};\n\nexport interface SkyAgGridDemoRow {\n  selected: boolean;\n  name: string;\n  age: number;\n  startDate: Date;\n  endDate?: Date;\n  department: SkyAutocompleteOption;\n  jobTitle?: SkyAutocompleteOption;\n}\n\nexport const SKY_AG_GRID_DEMO_DATA = [\n  {\n    selected: true,\n    name: 'Billy Bob',\n    age: 55,\n    startDate: new Date('12/1/1994'),\n    department: SKY_DEPARTMENTS[3],\n    jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n  },\n  {\n    selected: false,\n    name: 'Jane Deere',\n    age: 33,\n    startDate: new Date('7/15/2009'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][2],\n  },\n  {\n    selected: false,\n    name: 'John Doe',\n    age: 38,\n    startDate: new Date('9/1/2017'),\n    endDate: new Date('9/30/2017'),\n    department: SKY_DEPARTMENTS[1],\n  },\n  {\n    selected: false,\n    name: 'David Smith',\n    age: 51,\n    startDate: new Date('1/1/2012'),\n    endDate: new Date('6/15/2018'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][4],\n  },\n  {\n    selected: true,\n    name: 'Emily Johnson',\n    age: 41,\n    startDate: new Date('1/15/2014'),\n    department: SKY_DEPARTMENTS[0],\n    jobTitle: SKY_JOB_TITLES['Marketing'][2],\n  },\n  {\n    selected: false,\n    name: 'Nicole Davidson',\n    age: 22,\n    startDate: new Date('11/1/2019'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][0],\n  },\n  {\n    selected: false,\n    name: 'Carl Roberts',\n    age: 23,\n    startDate: new Date('11/1/2019'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][3],\n  },\n];\n"
+    },
+    {
+      "fileName": "data-entry-grid-docs-demo-edit-modal-context.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-edit-modal-context.ts",
+      "rawContents": "import { SkyAgGridDemoRow } from './data-entry-grid-docs-demo-data';\n\nexport class SkyDataEntryGridEditModalContext {\n  public gridData: SkyAgGridDemoRow[] = [];\n}\n"
+    },
+    {
+      "fileName": "data-entry-grid-docs-demo-edit-modal.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-edit-modal.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header> Edit employee information </sky-modal-header>\n  <sky-modal-content>\n    <div id=\"docs-edit-grid-modal-content\">\n      <sky-ag-grid-wrapper>\n        <ag-grid-angular\n          class=\"sky-ag-grid-editable\"\n          [gridOptions]=\"gridOptions\"\n          [rowData]=\"gridData\"\n        >\n        </ag-grid-angular>\n      </sky-ag-grid-wrapper>\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"instance.save(gridData)\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
+    },
+    {
+      "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  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-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"
+    },
+    {
+      "fileName": "data-entry-grid-docs-demo.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo.component.html",
+      "rawContents": "<div>\n  <sky-toolbar>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        id=\"edit-btn\"\n        (click)=\"openModal()\"\n      >\n        Edit\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-search\n        [searchText]=\"searchText\"\n        [debounceTime]=\"250\"\n        (searchApply)=\"searchApplied($event)\"\n        (searchChange)=\"searchApplied($event)\"\n        (searchClear)=\"searchApplied($event)\"\n      >\n      </sky-search>\n    </sky-toolbar-item>\n  </sky-toolbar>\n  <sky-ag-grid-wrapper>\n    <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"gridData\">\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</div>\n"
+    },
+    {
+      "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      type: [SkyCellType.CurrencyValidator],\n    },\n    {\n      colId: 'validationDate',\n      field: 'validationDate',\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\n  constructor(\n    private agGridService: SkyAgGridService,\n    private modalService: SkyModalService,\n    private changeDetection: ChangeDetectorRef\n  ) {\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    }\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",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo.module.ts",
+      "rawContents": "import { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { SkyDataEntryGridContextMenuComponent } from './data-entry-grid-docs-demo-context-menu.component';\nimport { SkyDataEntryGridEditModalComponent } from './data-entry-grid-docs-demo-edit-modal.component';\nimport { SkyDataEntryGridDemoComponent } from './data-entry-grid-docs-demo.component';\n\n@NgModule({\n  declarations: [\n    SkyDataEntryGridContextMenuComponent,\n    SkyDataEntryGridDemoComponent,\n    SkyDataEntryGridEditModalComponent,\n  ],\n  imports: [\n    AgGridModule.withComponents([SkyDataEntryGridContextMenuComponent]),\n    SkyToolbarModule,\n    SkySearchModule,\n    AgGridModule,\n    SkyAgGridModule,\n    SkyModalModule,\n    SkyDropdownModule,\n  ],\n  exports: [SkyDataEntryGridDemoComponent],\n  entryComponents: [SkyDataEntryGridEditModalComponent],\n})\nexport class SkyDataEntryGridDocsDemoModule {}\n"
+    },
+    {
+      "fileName": "data-manager-data-entry-grid-docs-demo-context-menu.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-context-menu.component.html",
+      "rawContents": "<sky-dropdown buttonType=\"context-menu\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Delete')\">Delete</button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Mark inactive')\">\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('More info')\">\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "fileName": "data-manager-data-entry-grid-docs-demo-data.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-data.ts",
+      "rawContents": "export interface SkyAutocompleteOption {\n  id: string;\n  name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n  {\n    id: '1',\n    name: 'Marketing',\n  },\n  {\n    id: '2',\n    name: 'Sales',\n  },\n  {\n    id: '3',\n    name: 'Engineering',\n  },\n  {\n    id: '4',\n    name: 'Customer Support',\n  },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n  Marketing: [\n    {\n      id: '1',\n      name: 'Social Media Coordinator',\n    },\n    {\n      id: '2',\n      name: 'Blog Manager',\n    },\n    {\n      id: '3',\n      name: 'Events Manager',\n    },\n  ],\n  Sales: [\n    {\n      id: '4',\n      name: 'Business Development Representative',\n    },\n    {\n      id: '5',\n      name: 'Account Executive',\n    },\n  ],\n  Engineering: [\n    {\n      id: '6',\n      name: 'Software Engineer',\n    },\n    {\n      id: '7',\n      name: 'Senior Software Engineer',\n    },\n    {\n      id: '8',\n      name: 'Principal Software Engineer',\n    },\n    {\n      id: '9',\n      name: 'UX Designer',\n    },\n    {\n      id: '10',\n      name: 'Product Manager',\n    },\n  ],\n  'Customer Support': [\n    {\n      id: '11',\n      name: 'Customer Support Representative',\n    },\n    {\n      id: '12',\n      name: 'Account Manager',\n    },\n    {\n      id: '13',\n      name: 'Customer Support Specialist',\n    },\n  ],\n};\n\nexport interface SkyAgGridDemoRow {\n  selected: boolean;\n  name: string;\n  age: number;\n  startDate: Date;\n  endDate?: Date;\n  department: SkyAutocompleteOption;\n  jobTitle?: SkyAutocompleteOption;\n}\n\nexport const SKY_AG_GRID_DEMO_DATA = [\n  {\n    selected: true,\n    name: 'Billy Bob',\n    age: 55,\n    startDate: new Date('12/1/1994'),\n    department: SKY_DEPARTMENTS[3],\n    jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n  },\n  {\n    selected: false,\n    name: 'Jane Deere',\n    age: 33,\n    startDate: new Date('7/15/2009'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][2],\n  },\n  {\n    selected: false,\n    name: 'John Doe',\n    age: 38,\n    startDate: new Date('9/1/2017'),\n    endDate: new Date('9/30/2017'),\n    department: SKY_DEPARTMENTS[1],\n    jobTitle: SKY_JOB_TITLES['Sales'][1],\n  },\n  {\n    selected: false,\n    name: 'David Smith',\n    age: 51,\n    startDate: new Date('1/1/2012'),\n    endDate: new Date('6/15/2018'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][4],\n  },\n  {\n    selected: true,\n    name: 'Emily Johnson',\n    age: 41,\n    startDate: new Date('1/15/2014'),\n    department: SKY_DEPARTMENTS[0],\n    jobTitle: SKY_JOB_TITLES['Marketing'][2],\n  },\n  {\n    selected: false,\n    name: 'Nicole Davidson',\n    age: 22,\n    startDate: new Date('11/1/2019'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][0],\n  },\n  {\n    selected: false,\n    name: 'Carl Roberts',\n    age: 23,\n    startDate: new Date('11/1/2019'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][3],\n  },\n];\n"
+    },
+    {
+      "fileName": "data-manager-data-entry-grid-docs-demo-edit-modal-context.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-edit-modal-context.ts",
+      "rawContents": "import { SkyAgGridDemoRow } from './data-manager-data-entry-grid-docs-demo-data';\n\nexport class SkyDataEntryGridEditModalContext {\n  public gridData: SkyAgGridDemoRow[] = [];\n}\n"
+    },
+    {
+      "fileName": "data-manager-data-entry-grid-docs-demo-edit-modal.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-edit-modal.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header> Edit employee information </sky-modal-header>\n  <sky-modal-content>\n    <div id=\"docs-edit-grid-modal-content\">\n      <sky-ag-grid-wrapper>\n        <ag-grid-angular\n          class=\"sky-ag-grid-editable\"\n          [gridOptions]=\"gridOptions\"\n          [rowData]=\"gridData\"\n        >\n        </ag-grid-angular>\n      </sky-ag-grid-wrapper>\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"instance.save(gridData)\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "fileName": "data-manager-data-entry-grid-docs-demo-filter-modal.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-filter-modal.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header> Filter employees </sky-modal-header>\n  <sky-modal-content>\n    <label for=\"sky-demo-select-type\">Job Title</label>\n    <select\n      id=\"sky-demo-select-type\"\n      [(ngModel)]=\"jobTitle\"\n      class=\"sky-form-control\"\n    >\n      <option value=\"any\">Any job title</option>\n      <option value=\"Product Manager\">Product Manager</option>\n      <option value=\"Software Engineer\">Software Engineer</option>\n    </select>\n    <div style=\"margin-top: 15px\">\n      <sky-checkbox [(ngModel)]=\"hideSales\">\n        <sky-checkbox-label> Hide Sales employees </sky-checkbox-label>\n      </sky-checkbox>\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-primary\"\n      (click)=\"applyFilters()\"\n    >\n      Apply filters\n    </button>\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-link\"\n      (click)=\"clearAllFilters()\"\n    >\n      Clear all filters\n    </button>\n    <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
+    },
+    {
+      "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?.name || '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"
+    },
+    {
+      "fileName": "data-manager-data-entry-grid-docs-demo.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo.component.html",
+      "rawContents": "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-data-manager-toolbar-left-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        id=\"edit-btn\"\n        (click)=\"openModal()\"\n      >\n        Edit\n      </button>\n    </sky-data-manager-toolbar-left-item>\n  </sky-data-manager-toolbar>\n  <sky-data-view skyAgGridDataManagerAdapter [viewId]=\"viewConfig.id\">\n    <sky-ag-grid-wrapper *ngIf=\"gridInitialized\">\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"displayedItems\">\n      </ag-grid-angular>\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n"
+    },
+    {
+      "fileName": "data-manager-data-entry-grid-docs-demo.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo.component.ts",
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnInit,\n} from '@angular/core';\n\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n  ColDef,\n  ColumnApi,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport {\n  SkyDataManagerState,\n  SkyDataViewConfig,\n  SkyDataManagerService,\n} from '@skyux/data-manager';\n\nimport { SkyDataManagerDataEntryGridContextMenuComponent } from './data-manager-data-entry-grid-docs-demo-context-menu.component';\nimport { SKY_AG_GRID_DEMO_DATA } from './data-manager-data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-manager-data-entry-grid-docs-demo-edit-modal-context';\nimport { SkyDataManagerDataEntryGridEditModalComponent } from './data-manager-data-entry-grid-docs-demo-edit-modal.component';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\nimport { DataManagerDataEntryGridDocsDemoFiltersModalComponent } from './data-manager-data-entry-grid-docs-demo-filter-modal.component';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo',\n  templateUrl: './data-manager-data-entry-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [SkyDataManagerService],\n})\nexport class SkyDataManagerDataEntryGridDemoComponent implements OnInit {\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      field: 'context',\n      headerName: '',\n      maxWidth: 50,\n      sortable: false,\n      cellRendererFramework: SkyDataManagerDataEntryGridContextMenuComponent,\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      type: [SkyCellType.CurrencyValidator],\n    },\n    {\n      field: 'validationDate',\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  public columnApi?: ColumnApi;\n  public displayedItems: any[] = [];\n  public gridData = SKY_AG_GRID_DEMO_DATA;\n\n  public viewId = 'gridView';\n  public activeViewId = 'gridView';\n\n  public dataState = new SkyDataManagerState({});\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: '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      {\n        id: 'context',\n        label: 'context',\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  public dataManagerConfig = {\n    filterModalComponent: DataManagerDataEntryGridDocsDemoFiltersModalComponent,\n    sortOptions: [\n      {\n        id: 'az',\n        label: 'Name (A - Z)',\n        descending: false,\n        propertyName: 'name',\n      },\n      {\n        id: 'za',\n        label: 'Name (Z - A)',\n        descending: true,\n        propertyName: 'name',\n      },\n    ],\n  };\n\n  public defaultDataState = new SkyDataManagerState({\n    filterData: {\n      filtersApplied: false,\n      filters: {\n        hideSales: false,\n      },\n    },\n    views: [\n      {\n        viewId: this.viewId,\n        displayedColumnIds: [\n          'selected',\n          'name',\n          'age',\n          'startDate',\n          'endDate',\n          'department',\n          'jobTitle',\n          'validationCurrency',\n          'validationDate',\n        ],\n      },\n    ],\n  });\n\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService,\n    private modalService: SkyModalService\n  ) {\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.setInitialColumnOrder();\n        this.updateData();\n        this.changeDetector.markForCheck();\n      });\n  }\n\n  public ngOnInit(): void {\n    this.displayedItems = this.gridData;\n\n    this.dataManagerService.initDataManager({\n      activeViewId: this.activeViewId,\n      dataManagerConfig: this.dataManagerConfig,\n      defaultDataState: this.defaultDataState,\n    });\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    this.changeDetector.markForCheck();\n  }\n\n  public updateData(): void {\n    this.sortItems();\n    this.displayedItems = this.filterItems(this.searchItems(this.gridData));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\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(event: GridReadyEvent): void {\n    this.columnApi = event.columnApi;\n    this.gridApi = event.api;\n    this.gridApi.sizeColumnsToFit();\n    this.updateData();\n    this.changeDetector.markForCheck();\n  }\n\n  public sortItems(): void {\n    let sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      const allColumns = this.columnApi.getAllColumns() || [];\n      allColumns.forEach((column) => {\n        if (column.getColId() === sortOption.propertyName) {\n          column.setSort(sortOption.descending ? 'desc' : 'asc');\n        } else {\n          column.setSort('none');\n        }\n      });\n    }\n  }\n\n  public clearAll(): void {\n    if (this.dataState) {\n      let selectedIds = this.dataState.selectedIds || [];\n\n      this.displayedItems.forEach((item) => {\n        if (item.selected) {\n          let itemIndex = selectedIds.indexOf(item.id);\n          item.selected = false;\n          selectedIds.splice(itemIndex, 1);\n        }\n      });\n      this.dataState.selectedIds = selectedIds;\n      this.dataManagerService.updateDataState(this.dataState, this.viewId);\n    }\n  }\n\n  public selectAll(): void {\n    if (this.dataState) {\n      let selectedIds = this.dataState.selectedIds || [];\n\n      this.displayedItems.forEach((item) => {\n        if (!item.selected) {\n          item.selected = true;\n          selectedIds.push(item.id);\n        }\n      });\n\n      this.dataState.selectedIds = selectedIds;\n      this.dataManagerService.updateDataState(this.dataState, this.viewId);\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    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.hideOrange && item.color !== 'orange') ||\n            !filters.hideOrange) &&\n          ((filters.type !== 'any' && item.type === filters.type) ||\n            !filters.type ||\n            filters.type === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  public openModal(): void {\n    const context = new SkyDataEntryGridEditModalContext();\n    context.gridData = this.gridData;\n    this.changeDetector.markForCheck();\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      SkyDataManagerDataEntryGridEditModalComponent,\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      this.changeDetector.markForCheck();\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-manager-data-entry-grid-docs-demo.module.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo.module.ts",
+      "rawContents": "import { NgModule } from '@angular/core';\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';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { AgGridModule } from 'ag-grid-angular';\nimport { DataManagerDataEntryGridDocsDemoFiltersModalComponent } from './data-manager-data-entry-grid-docs-demo-filter-modal.component';\n\nimport { SkyDataManagerDataEntryGridContextMenuComponent } from './data-manager-data-entry-grid-docs-demo-context-menu.component';\nimport { SkyDataManagerDataEntryGridEditModalComponent } from './data-manager-data-entry-grid-docs-demo-edit-modal.component';\nimport { SkyDataManagerDataEntryGridDemoComponent } from './data-manager-data-entry-grid-docs-demo.component';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n  declarations: [\n    SkyDataManagerDataEntryGridContextMenuComponent,\n    SkyDataManagerDataEntryGridDemoComponent,\n    SkyDataManagerDataEntryGridEditModalComponent,\n    DataManagerDataEntryGridDocsDemoFiltersModalComponent,\n  ],\n  imports: [\n    AgGridModule.withComponents([\n      SkyDataManagerDataEntryGridContextMenuComponent,\n    ]),\n    CommonModule,\n    FormsModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    AgGridModule,\n    SkyAgGridModule,\n    SkyModalModule,\n    SkyDropdownModule,\n    SkyDataManagerModule,\n    SkyCheckboxModule,\n  ],\n  exports: [SkyDataManagerDataEntryGridDemoComponent],\n  entryComponents: [\n    SkyDataManagerDataEntryGridEditModalComponent,\n    DataManagerDataEntryGridDocsDemoFiltersModalComponent,\n  ],\n})\nexport class SkyDataManagerDataEntryGridDocsDemoModule {}\n"
+    },
+    {
+      "fileName": "basic-data-grid-docs-demo-data.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo-data.ts",
+      "rawContents": "export interface SkyAutocompleteOption {\n  id: string;\n  name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n  {\n    id: '1',\n    name: 'Marketing',\n  },\n  {\n    id: '2',\n    name: 'Sales',\n  },\n  {\n    id: '3',\n    name: 'Engineering',\n  },\n  {\n    id: '4',\n    name: 'Customer Support',\n  },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n  Marketing: [\n    {\n      id: '1',\n      name: 'Social Media Coordinator',\n    },\n    {\n      id: '2',\n      name: 'Blog Manager',\n    },\n    {\n      id: '3',\n      name: 'Events Manager',\n    },\n  ],\n  Sales: [\n    {\n      id: '4',\n      name: 'Business Development Representative',\n    },\n    {\n      id: '5',\n      name: 'Account Executive',\n    },\n  ],\n  Engineering: [\n    {\n      id: '6',\n      name: 'Software Engineer',\n    },\n    {\n      id: '7',\n      name: 'Senior Software Engineer',\n    },\n    {\n      id: '8',\n      name: 'Principal Software Engineer',\n    },\n    {\n      id: '9',\n      name: 'UX Designer',\n    },\n    {\n      id: '10',\n      name: 'Product Manager',\n    },\n  ],\n  'Customer Support': [\n    {\n      id: '11',\n      name: 'Customer Support Representative',\n    },\n    {\n      id: '12',\n      name: 'Account Manager',\n    },\n    {\n      id: '13',\n      name: 'Customer Support Specialist',\n    },\n  ],\n};\n\nexport interface SkyAgGridDemoRow {\n  selected: boolean;\n  name: string;\n  age: number;\n  startDate: Date;\n  endDate?: Date;\n  department: SkyAutocompleteOption;\n  jobTitle?: SkyAutocompleteOption;\n}\n\nexport const SKY_AG_GRID_DEMO_DATA = [\n  {\n    selected: true,\n    name: 'Billy Bob',\n    age: 55,\n    startDate: new Date('12/1/1994'),\n    department: SKY_DEPARTMENTS[3],\n    jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n  },\n  {\n    selected: false,\n    name: 'Jane Deere',\n    age: 33,\n    startDate: new Date('7/15/2009'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][2],\n  },\n  {\n    selected: false,\n    name: 'John Doe',\n    age: 38,\n    startDate: new Date('9/1/2017'),\n    endDate: new Date('9/30/2017'),\n    department: SKY_DEPARTMENTS[1],\n  },\n  {\n    selected: false,\n    name: 'David Smith',\n    age: 51,\n    startDate: new Date('1/1/2012'),\n    endDate: new Date('6/15/2018'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][4],\n  },\n  {\n    selected: true,\n    name: 'Emily Johnson',\n    age: 41,\n    startDate: new Date('1/15/2014'),\n    department: SKY_DEPARTMENTS[0],\n    jobTitle: SKY_JOB_TITLES['Marketing'][2],\n  },\n  {\n    selected: false,\n    name: 'Nicole Davidson',\n    age: 22,\n    startDate: new Date('11/1/2019'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][0],\n  },\n  {\n    selected: false,\n    name: 'Carl Roberts',\n    age: 23,\n    startDate: new Date('11/1/2019'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][3],\n  },\n];\n"
+    },
+    {
+      "fileName": "basic-data-grid-docs-demo.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo.component.html",
+      "rawContents": "<div>\n  <sky-toolbar>\n    <sky-toolbar-item>\n      <sky-search\n        [searchText]=\"searchText\"\n        [debounceTime]=\"250\"\n        (searchApply)=\"searchApplied($event)\"\n        (searchChange)=\"searchApplied($event)\"\n        (searchClear)=\"searchApplied($event)\"\n      >\n      </sky-search>\n    </sky-toolbar-item>\n  </sky-toolbar>\n  <sky-ag-grid-wrapper>\n    <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"gridData\">\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</div>\n"
+    },
+    {
+      "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\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef\n  ) {\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    }\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",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerModule,\n  SkyDataManagerService,\n} from '@skyux/data-manager';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { SkyBasicDataGridDemoComponent } from './basic-data-grid-docs-demo.component';\n\n@NgModule({\n  declarations: [SkyBasicDataGridDemoComponent],\n  exports: [SkyBasicDataGridDemoComponent],\n  imports: [\n    CommonModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n  ],\n  providers: [SkyDataManagerService],\n})\nexport class SkyBasicDataGridDocsDemoModule {}\n"
+    },
+    {
+      "fileName": "data-manager-data-grid-docs-demo-data.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo-data.ts",
+      "rawContents": "export interface SkyAutocompleteOption {\n  id: string;\n  name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n  {\n    id: '1',\n    name: 'Marketing',\n  },\n  {\n    id: '2',\n    name: 'Sales',\n  },\n  {\n    id: '3',\n    name: 'Engineering',\n  },\n  {\n    id: '4',\n    name: 'Customer Support',\n  },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n  Marketing: [\n    {\n      id: '1',\n      name: 'Social Media Coordinator',\n    },\n    {\n      id: '2',\n      name: 'Blog Manager',\n    },\n    {\n      id: '3',\n      name: 'Events Manager',\n    },\n  ],\n  Sales: [\n    {\n      id: '4',\n      name: 'Business Development Representative',\n    },\n    {\n      id: '5',\n      name: 'Account Executive',\n    },\n  ],\n  Engineering: [\n    {\n      id: '6',\n      name: 'Software Engineer',\n    },\n    {\n      id: '7',\n      name: 'Senior Software Engineer',\n    },\n    {\n      id: '8',\n      name: 'Principal Software Engineer',\n    },\n    {\n      id: '9',\n      name: 'UX Designer',\n    },\n    {\n      id: '10',\n      name: 'Product Manager',\n    },\n  ],\n  'Customer Support': [\n    {\n      id: '11',\n      name: 'Customer Support Representative',\n    },\n    {\n      id: '12',\n      name: 'Account Manager',\n    },\n    {\n      id: '13',\n      name: 'Customer Support Specialist',\n    },\n  ],\n};\n\nexport interface SkyAgGridDemoRow {\n  selected: boolean;\n  name: string;\n  age: number;\n  startDate: Date;\n  endDate?: Date;\n  department: SkyAutocompleteOption;\n  jobTitle?: SkyAutocompleteOption;\n}\n\nexport const SKY_AG_GRID_DEMO_DATA = [\n  {\n    selected: true,\n    name: 'Billy Bob',\n    age: 55,\n    startDate: new Date('12/1/1994'),\n    department: SKY_DEPARTMENTS[3],\n    jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n  },\n  {\n    selected: false,\n    name: 'Jane Deere',\n    age: 33,\n    startDate: new Date('7/15/2009'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][2],\n  },\n  {\n    selected: false,\n    name: 'John Doe',\n    age: 38,\n    startDate: new Date('9/1/2017'),\n    endDate: new Date('9/30/2017'),\n    department: SKY_DEPARTMENTS[1],\n    jobTitle: SKY_JOB_TITLES['Sales'][1],\n  },\n  {\n    selected: false,\n    name: 'David Smith',\n    age: 51,\n    startDate: new Date('1/1/2012'),\n    endDate: new Date('6/15/2018'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][4],\n  },\n  {\n    selected: true,\n    name: 'Emily Johnson',\n    age: 41,\n    startDate: new Date('1/15/2014'),\n    department: SKY_DEPARTMENTS[0],\n    jobTitle: SKY_JOB_TITLES['Marketing'][2],\n  },\n  {\n    selected: false,\n    name: 'Nicole Davidson',\n    age: 22,\n    startDate: new Date('11/1/2019'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][0],\n  },\n  {\n    selected: false,\n    name: 'Carl Roberts',\n    age: 23,\n    startDate: new Date('11/1/2019'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][3],\n  },\n];\n"
+    },
+    {
+      "fileName": "data-manager-data-grid-docs-demo-filter-modal.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo-filter-modal.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header> Filter employees </sky-modal-header>\n  <sky-modal-content>\n    <label for=\"sky-demo-select-type\">Job Title</label>\n    <select\n      id=\"sky-demo-select-type\"\n      [(ngModel)]=\"jobTitle\"\n      class=\"sky-form-control\"\n    >\n      <option value=\"any\">Any job title</option>\n      <option value=\"Product Manager\">Product Manager</option>\n      <option value=\"Software Engineer\">Software Engineer</option>\n    </select>\n    <div style=\"margin-top: 15px\">\n      <sky-checkbox [(ngModel)]=\"hideSales\">\n        <sky-checkbox-label> Hide Sales employees </sky-checkbox-label>\n      </sky-checkbox>\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-primary\"\n      (click)=\"applyFilters()\"\n    >\n      Apply filters\n    </button>\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-link\"\n      (click)=\"clearAllFilters()\"\n    >\n      Clear all filters\n    </button>\n    <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
+    },
+    {
+      "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?.name || '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"
+    },
+    {
+      "fileName": "data-manager-data-grid-docs-demo.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo.component.html",
+      "rawContents": "<sky-data-manager>\n  <sky-data-manager-toolbar></sky-data-manager-toolbar>\n  <sky-data-view skyAgGridDataManagerAdapter [viewId]=\"viewConfig.id\">\n    <sky-ag-grid-wrapper *ngIf=\"gridInitialized\">\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"displayedItems\">\n      </ag-grid-angular>\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n"
+    },
+    {
+      "fileName": "data-manager-data-grid-docs-demo.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo.component.ts",
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnInit,\n} from '@angular/core';\nimport { SkyCellType, SkyAgGridService } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport {\n  GridApi,\n  GridReadyEvent,\n  GridOptions,\n  ValueFormatterParams,\n  ColumnApi,\n  ColDef,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './data-manager-data-grid-docs-demo-data';\nimport { DataManagerDataGridDocsDemoFiltersModalComponent } from './data-manager-data-grid-docs-demo-filter-modal.component';\n\n@Component({\n  selector: 'app-data-manager-data-grid-docs-demo',\n  templateUrl: './data-manager-data-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [SkyDataManagerService],\n})\nexport class SkyDataManagerDataGridDemoComponent implements OnInit {\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 columnApi?: ColumnApi;\n  public displayedItems: any[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public items = SKY_AG_GRID_DEMO_DATA;\n  public gridOptions!: GridOptions;\n\n  public searchText: string = '';\n  public activeViewId = 'dataManagerGridView';\n  public viewId = 'dataManagerGridView';\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: '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  public dataState = new SkyDataManagerState({});\n\n  public dataManagerConfig = {\n    filterModalComponent: DataManagerDataGridDocsDemoFiltersModalComponent,\n    sortOptions: [\n      {\n        id: 'az',\n        label: 'Name (A-Z)',\n        descending: false,\n        propertyName: 'name',\n      },\n      {\n        id: 'za',\n        label: 'Name (Z-A)',\n        descending: true,\n        propertyName: 'name',\n      },\n    ],\n  };\n  public defaultDataState = new SkyDataManagerState({\n    filterData: {\n      filtersApplied: false,\n      filters: {\n        hideSales: false,\n      },\n    },\n    views: [\n      {\n        viewId: this.viewId,\n        displayedColumnIds: [\n          'selected',\n          'name',\n          'age',\n          'startDate',\n          'endDate',\n          'department',\n          'jobTitle',\n        ],\n      },\n    ],\n  });\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.setInitialColumnOrder();\n        this.updateData();\n        this.changeDetector.markForCheck();\n      });\n  }\n\n  public ngOnInit(): void {\n    this.displayedItems = this.items;\n\n    this.dataManagerService.initDataManager({\n      activeViewId: this.activeViewId,\n      dataManagerConfig: this.dataManagerConfig,\n      defaultDataState: this.defaultDataState,\n    });\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    this.changeDetector.markForCheck();\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    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 sortItems(): void {\n    let sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      const allColumns = this.columnApi.getAllColumns() || [];\n      allColumns.forEach((column) => {\n        if (column.getColId() === sortOption.propertyName) {\n          column.setSort(sortOption.descending ? 'desc' : 'asc');\n        } else {\n          column.setSort('none');\n        }\n      });\n    }\n  }\n\n  public clearAll(): void {\n    if (this.dataState) {\n      let selectedIds = this.dataState.selectedIds || [];\n\n      this.displayedItems.forEach((item) => {\n        if (item.selected) {\n          let itemIndex = selectedIds.indexOf(item.id);\n          item.selected = false;\n          selectedIds.splice(itemIndex, 1);\n        }\n      });\n      this.dataState.selectedIds = selectedIds;\n      this.dataManagerService.updateDataState(this.dataState, this.viewId);\n    }\n  }\n\n  public selectAll(): void {\n    if (this.dataState) {\n      let selectedIds = this.dataState.selectedIds || [];\n\n      this.displayedItems.forEach((item) => {\n        if (!item.selected) {\n          item.selected = true;\n          selectedIds.push(item.id);\n        }\n      });\n\n      this.dataState.selectedIds = selectedIds;\n      this.dataManagerService.updateDataState(this.dataState, this.viewId);\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"
+    },
+    {
+      "fileName": "data-manager-data-grid-docs-demo.module.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo.module.ts",
+      "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 { SkyDataManagerDataGridDemoComponent } from './data-manager-data-grid-docs-demo.component';\n\n@NgModule({\n  declarations: [\n    SkyDataManagerDataGridDemoComponent,\n    DataManagerDataGridDocsDemoFiltersModalComponent,\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"
+    }
+  ]
 }

package/esm2015/modules/ag-grid/ag-grid-adapter.service.js

@@ -43,9 +43,9 @@ export class SkyAgGridAdapterService {
         }
     }
 }
-SkyAgGridAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAgGridAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridAdapterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridAdapterService, decorators: [{
+SkyAgGridAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAgGridAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridAdapterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/esm2015/modules/ag-grid/ag-grid-data-manager-adapter.directive.js

@@ -192,9 +192,9 @@ export class SkyAgGridDataManagerAdapterDirective {
         agGrid.api.deselectAll();
     }
 }
-SkyAgGridDataManagerAdapterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Directive });
-SkyAgGridDataManagerAdapterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: SkyAgGridDataManagerAdapterDirective, selector: "[skyAgGridDataManagerAdapter]", inputs: { viewId: "viewId" }, queries: [{ propertyName: "agGridList", predicate: AgGridAngular, descendants: true }, { propertyName: "skyAgGridWrapperList", predicate: SkyAgGridWrapperComponent, descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, decorators: [{
+SkyAgGridDataManagerAdapterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Directive });
+SkyAgGridDataManagerAdapterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: SkyAgGridDataManagerAdapterDirective, selector: "[skyAgGridDataManagerAdapter]", inputs: { viewId: "viewId" }, queries: [{ propertyName: "agGridList", predicate: AgGridAngular, descendants: true }, { propertyName: "skyAgGridWrapperList", predicate: SkyAgGridWrapperComponent, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyAgGridDataManagerAdapter]',

package/esm2015/modules/ag-grid/ag-grid-row-delete.component.js

@@ -8,8 +8,8 @@ import * as i2 from "@angular/common";
  */
 export class SkyAgGridRowDeleteComponent {
 }
-SkyAgGridRowDeleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridRowDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridRowDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyAgGridRowDeleteComponent, selector: "ng-component", viewQueries: [{ propertyName: "inlineDeleteTemplateRef", first: true, predicate: ["inlineDeleteTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "inlineDeleteRefs", predicate: ["inlineDeleteRef"], descendants: true }], ngImport: i0, template: `
+SkyAgGridRowDeleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridRowDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyAgGridRowDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyAgGridRowDeleteComponent, selector: "ng-component", viewQueries: [{ propertyName: "inlineDeleteTemplateRef", first: true, predicate: ["inlineDeleteTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "inlineDeleteRefs", predicate: ["inlineDeleteRef"], descendants: true }], ngImport: i0, template: `
     <ng-template
       let-row
       let-tableWidth="tableWidth()"
@@ -36,7 +36,7 @@ SkyAgGridRowDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
       </div>
     </ng-template>
   `, isInline: true, components: [{ type: i1.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridRowDeleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridRowDeleteComponent, decorators: [{
             type: Component,
             args: [{
                     template: `

package/esm2015/modules/ag-grid/ag-grid-row-delete.directive.js

@@ -208,9 +208,9 @@ export class SkyAgGridRowDeleteDirective {
         this.changeDetector.markForCheck();
     }
 }
-SkyAgGridRowDeleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridRowDeleteDirective, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i1.SkyOverlayService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-SkyAgGridRowDeleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: SkyAgGridRowDeleteDirective, selector: "[skyAgGridRowDelete]", inputs: { rowDeleteIds: "rowDeleteIds" }, outputs: { rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm", rowDeleteIdsChange: "rowDeleteIdsChange" }, queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridRowDeleteDirective, decorators: [{
+SkyAgGridRowDeleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridRowDeleteDirective, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i1.SkyOverlayService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+SkyAgGridRowDeleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: SkyAgGridRowDeleteDirective, selector: "[skyAgGridRowDelete]", inputs: { rowDeleteIds: "rowDeleteIds" }, outputs: { rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm", rowDeleteIdsChange: "rowDeleteIdsChange" }, queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridRowDeleteDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyAgGridRowDelete]',

package/esm2015/modules/ag-grid/ag-grid-wrapper.component.js

@@ -77,9 +77,9 @@ export class SkyAgGridWrapperComponent {
         }
     }
 }
-SkyAgGridWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [{ token: i1.SkyAgGridAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyAgGridWrapperComponent, selector: "sky-ag-grid-wrapper", queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, static: true }], ngImport: i0, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  class=\"sky-ag-grid\"\n  tabindex=\"0\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <ng-content></ng-content>\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n", directives: [{ type: i2.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridWrapperComponent, decorators: [{
+SkyAgGridWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [{ token: i1.SkyAgGridAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyAgGridWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyAgGridWrapperComponent, selector: "sky-ag-grid-wrapper", queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, static: true }], ngImport: i0, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  class=\"sky-ag-grid\"\n  tabindex=\"0\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <ng-content></ng-content>\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n", directives: [{ type: i2.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-ag-grid-wrapper',

package/esm2015/modules/ag-grid/ag-grid.module.js

@@ -31,8 +31,8 @@ import { SkyAgGridCellValidatorModule } from './cell-validator/ag-grid-cell-vali
 import * as i0 from "@angular/core";
 export class SkyAgGridModule {
 }
-SkyAgGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyAgGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridModule, declarations: [SkyAgGridDataManagerAdapterDirective,
+SkyAgGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyAgGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridModule, declarations: [SkyAgGridDataManagerAdapterDirective,
         SkyAgGridRowDeleteComponent,
         SkyAgGridRowDeleteDirective,
         SkyAgGridWrapperComponent], imports: [AgGridModule,
@@ -54,7 +54,7 @@ SkyAgGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         SkyAgGridRowDeleteComponent,
         SkyAgGridRowDeleteDirective,
         SkyAgGridWrapperComponent] });
-SkyAgGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridModule, imports: [[
+SkyAgGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridModule, imports: [[
             AgGridModule,
             CommonModule,
             SkyAgGridCellEditorAutocompleteModule,
@@ -72,7 +72,7 @@ SkyAgGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             SkyInlineDeleteModule,
             SkyViewkeeperModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAgGridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyAgGridModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [