@skyux/ag-grid 5.6.0 → 5.6.1

package/documentation.json

@@ -773,7 +773,7 @@
     {
       "fileName": "data-manager-data-entry-grid-docs-demo-view-grid.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-view-grid.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport {\n  ColDef,\n  ColumnApi,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  RowSelectedEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-view-grid',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoViewGridComponent\n  implements OnInit\n{\n  @Input()\n  public set items(value: any[]) {\n    this._items = value;\n    this.changeDetector.markForCheck();\n    if (this.gridApi) {\n      this.gridApi.refreshCells();\n    }\n  }\n\n  public viewId = 'dataEntryGridWithDataManagerView';\n\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      field: 'name',\n      headerName: 'Name',\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'validationCurrency',\n      headerName: 'Validation currency',\n      type: [SkyCellType.CurrencyValidator],\n    },\n    {\n      field: 'validationDate',\n      headerName: 'Validation date',\n      type: [SkyCellType.Date, SkyCellType.Validator],\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n          validatorMessage: 'Please enter a future date',\n        },\n      },\n    },\n  ];\n\n  public dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: any[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate: string;\n  public isActive = false;\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Data Grid View',\n    icon: 'table',\n    searchEnabled: true,\n    sortEnabled: true,\n    multiselectToolbarEnabled: true,\n    columnPickerEnabled: true,\n    filterButtonEnabled: true,\n    columnOptions: [\n      {\n        id: 'selected',\n        label: 'selected',\n        alwaysDisplayed: true,\n      },\n      {\n        id: 'name',\n        label: 'Name',\n        description: 'The name of the employee.',\n      },\n      {\n        id: 'age',\n        label: 'Age',\n        description: 'The age of the employee.',\n      },\n      {\n        id: 'startDate',\n        label: 'Start date',\n        description: 'The start date of the employee.',\n      },\n      {\n        id: 'endDate',\n        label: 'End date',\n        description: 'The end date of the employee.',\n      },\n      {\n        id: 'department',\n        label: 'Department',\n        description: 'The department of the employee',\n      },\n      {\n        id: 'jobTitle',\n        label: 'Title',\n        description: 'The job title of the employee.',\n      },\n      {\n        id: 'validationCurrency',\n        label: 'Validation currency',\n        description: 'An example column for currency validation.',\n      },\n      {\n        id: 'validationDate',\n        label: 'Validation date',\n        description: 'An example column for date validation.',\n      },\n    ],\n  };\n\n  private _items: any[] = [];\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n  }\n\n  public ngOnInit(): void {\n    this.displayedItems = this._items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.setInitialColumnOrder();\n        this.updateData();\n        this.changeDetector.detectChanges();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isActive = id === this.viewId;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public updateData(): void {\n    this.sortItems();\n    this.displayedItems = this.filterItems(this.searchItems(this._items));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\n    }\n\n    if (this.displayedItems.length > 0) {\n      this.gridApi?.hideOverlay();\n    } else {\n      this.gridApi?.showNoRowsOverlay();\n    }\n\n    this.changeDetector.markForCheck();\n  }\n\n  public setInitialColumnOrder(): void {\n    const viewState = this.dataState.getViewStateById(this.viewId);\n    const visibleColumns = viewState.displayedColumnIds;\n\n    this.columnDefs.sort((col1, col2) => {\n      const col1Index = visibleColumns.findIndex(\n        (colId: string) => colId === col1.colId\n      );\n      const col2Index = visibleColumns.findIndex(\n        (colId: string) => colId === col2.colId\n      );\n\n      if (col1Index === -1) {\n        col1.hide = true;\n        return 0;\n      } else if (col2Index === -1) {\n        col2.hide = true;\n        return 0;\n      } else {\n        return col1Index - col2Index;\n      }\n    });\n\n    this.gridInitialized = true;\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.columnApi = gridReadyEvent.columnApi;\n    this.updateData();\n    this.changeDetector.markForCheck();\n  }\n\n  public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n    if (!rowSelectedEvent.data.selected) {\n      this.updateData();\n    }\n  }\n\n  public sortItems(): void {\n    const sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      this.columnApi.applyColumnState({\n        state: [\n          {\n            colId: sortOption.propertyName,\n            sort: sortOption.descending ? 'desc' : 'asc',\n          },\n        ],\n      });\n    }\n  }\n\n  public searchItems(items: any[]): any[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: any) {\n        let property: any;\n\n        for (property in item) {\n          if (\n            item.hasOwnProperty(property) &&\n            (property === 'name' || property === 'description')\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n\n        return false;\n      });\n    }\n\n    return searchedItems;\n  }\n\n  public filterItems(items: any[]): any[] {\n    let filteredItems = items;\n    const filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      const filters = filterData.filters;\n      filteredItems = items.filter((item: any) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport {\n  ColDef,\n  ColumnApi,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  RowSelectedEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-view-grid',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoViewGridComponent\n  implements OnInit\n{\n  @Input()\n  public set items(value: any[]) {\n    this._items = value;\n    this.changeDetector.markForCheck();\n    if (this.gridApi) {\n      this.gridApi.refreshCells();\n    }\n  }\n\n  public viewId = 'dataEntryGridWithDataManagerView';\n\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      field: 'name',\n      headerName: 'Name',\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'validationCurrency',\n      headerName: 'Validation currency',\n      type: [SkyCellType.CurrencyValidator],\n    },\n    {\n      field: 'validationDate',\n      headerName: 'Validation date',\n      type: [SkyCellType.Date, SkyCellType.Validator],\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n          validatorMessage: 'Please enter a future date',\n        },\n      },\n    },\n  ];\n\n  public dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: any[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate: string;\n  public isActive = false;\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Data Grid View',\n    icon: 'table',\n    searchEnabled: true,\n    sortEnabled: true,\n    multiselectToolbarEnabled: true,\n    columnPickerEnabled: true,\n    filterButtonEnabled: true,\n    columnOptions: [\n      {\n        id: 'selected',\n        label: 'selected',\n        alwaysDisplayed: true,\n      },\n      {\n        id: 'name',\n        label: 'Name',\n        description: 'The name of the employee.',\n      },\n      {\n        id: 'age',\n        label: 'Age',\n        description: 'The age of the employee.',\n      },\n      {\n        id: 'startDate',\n        label: 'Start date',\n        description: 'The start date of the employee.',\n      },\n      {\n        id: 'endDate',\n        label: 'End date',\n        description: 'The end date of the employee.',\n      },\n      {\n        id: 'department',\n        label: 'Department',\n        description: 'The department of the employee',\n      },\n      {\n        id: 'jobTitle',\n        label: 'Title',\n        description: 'The job title of the employee.',\n      },\n      {\n        id: 'validationCurrency',\n        label: 'Validation currency',\n        description: 'An example column for currency validation.',\n      },\n      {\n        id: 'validationDate',\n        label: 'Validation date',\n        description: 'An example column for date validation.',\n      },\n    ],\n  };\n\n  private _items: any[] = [];\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n  }\n\n  public ngOnInit(): void {\n    this.displayedItems = this._items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.setInitialColumnOrder();\n        this.updateData();\n        this.changeDetector.detectChanges();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isActive = id === this.viewId;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public updateData(): void {\n    this.sortItems();\n    this.displayedItems = this.filterItems(this.searchItems(this._items));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\n    }\n\n    if (this.displayedItems.length > 0) {\n      this.gridApi?.hideOverlay();\n    } else {\n      this.gridApi?.showNoRowsOverlay();\n    }\n\n    this.changeDetector.markForCheck();\n  }\n\n  public setInitialColumnOrder(): void {\n    const viewState = this.dataState.getViewStateById(this.viewId);\n    const visibleColumns = viewState.displayedColumnIds;\n\n    this.columnDefs.sort((col1, col2) => {\n      const col1Index = visibleColumns.findIndex(\n        (colId: string) => colId === col1.colId\n      );\n      const col2Index = visibleColumns.findIndex(\n        (colId: string) => colId === col2.colId\n      );\n\n      if (col1Index === -1) {\n        col1.hide = true;\n        return 0;\n      } else if (col2Index === -1) {\n        col2.hide = true;\n        return 0;\n      } else {\n        return col1Index - col2Index;\n      }\n    });\n\n    this.gridInitialized = true;\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.columnApi = gridReadyEvent.columnApi;\n    this.updateData();\n    this.changeDetector.markForCheck();\n  }\n\n  public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n    if (!rowSelectedEvent.data.selected) {\n      this.updateData();\n    }\n  }\n\n  public sortItems(): void {\n    const sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      this.columnApi.applyColumnState({\n        state: [\n          {\n            colId: sortOption.propertyName,\n            sort: sortOption.descending ? 'desc' : 'asc',\n          },\n        ],\n      });\n    }\n  }\n\n  public searchItems(items: any[]): any[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: any) {\n        let property: any;\n\n        for (property in item) {\n          if (\n            Object.prototype.hasOwnProperty.call(item, property) &&\n            (property === 'name' || property === 'description')\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n\n        return false;\n      });\n    }\n\n    return searchedItems;\n  }\n\n  public filterItems(items: any[]): any[] {\n    let filteredItems = items;\n    const filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      const filters = filterData.filters;\n      filteredItems = items.filter((item: any) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
     },
     {
       "fileName": "data-manager-data-entry-grid-docs-demo.component.html",
@@ -833,7 +833,7 @@
     {
       "fileName": "data-manager-data-grid-docs-demo-view-grid.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo-view-grid.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport {\n  ColDef,\n  ColumnApi,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  RowSelectedEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-manager-data-grid-docs-demo-view-grid',\n  templateUrl: './data-manager-data-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridsDocsDemoViewGridComponent implements OnInit {\n  @Input()\n  public items: any[] = [];\n\n  public viewId = 'dataGridWithDataManagerView';\n\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      field: 'name',\n      headerName: 'Name',\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n  ];\n\n  public dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: any[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate: string;\n  public isActive = false;\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Data Grid View',\n    icon: 'table',\n    searchEnabled: true,\n    sortEnabled: true,\n    multiselectToolbarEnabled: true,\n    columnPickerEnabled: true,\n    filterButtonEnabled: true,\n    columnOptions: [\n      {\n        id: 'selected',\n        label: 'selected',\n        alwaysDisplayed: true,\n      },\n      {\n        id: 'name',\n        label: 'Name',\n        description: 'The name of the employee.',\n      },\n      {\n        id: 'age',\n        label: 'Age',\n        description: 'The age of the employee.',\n      },\n      {\n        id: 'startDate',\n        label: 'Start date',\n        description: 'The start date of the employee.',\n      },\n      {\n        id: 'endDate',\n        label: 'End date',\n        description: 'The end date of the employee.',\n      },\n      {\n        id: 'department',\n        label: 'Department',\n        description: 'The department of the employee',\n      },\n      {\n        id: 'jobTitle',\n        label: 'Title',\n        description: 'The job title of the employee.',\n      },\n    ],\n  };\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n  }\n\n  public ngOnInit(): void {\n    this.displayedItems = this.items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.setInitialColumnOrder();\n        this.updateData();\n        this.changeDetector.detectChanges();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isActive = id === this.viewId;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public updateData(): void {\n    this.sortItems();\n    this.displayedItems = this.filterItems(this.searchItems(this.items));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\n    }\n\n    if (this.displayedItems.length > 0) {\n      this.gridApi?.hideOverlay();\n    } else {\n      this.gridApi?.showNoRowsOverlay();\n    }\n\n    this.changeDetector.markForCheck();\n  }\n\n  public setInitialColumnOrder(): void {\n    const viewState = this.dataState.getViewStateById(this.viewId);\n    const visibleColumns = viewState.displayedColumnIds;\n\n    this.columnDefs.sort((col1, col2) => {\n      const col1Index = visibleColumns.findIndex(\n        (colId: string) => colId === col1.colId\n      );\n      const col2Index = visibleColumns.findIndex(\n        (colId: string) => colId === col2.colId\n      );\n\n      if (col1Index === -1) {\n        col1.hide = true;\n        return 0;\n      } else if (col2Index === -1) {\n        col2.hide = true;\n        return 0;\n      } else {\n        return col1Index - col2Index;\n      }\n    });\n\n    this.gridInitialized = true;\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.columnApi = gridReadyEvent.columnApi;\n    this.updateData();\n    this.changeDetector.markForCheck();\n  }\n\n  public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n    if (!rowSelectedEvent.data.selected) {\n      this.updateData();\n    }\n  }\n\n  public sortItems(): void {\n    const sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      this.columnApi.applyColumnState({\n        state: [\n          {\n            colId: sortOption.propertyName,\n            sort: sortOption.descending ? 'desc' : 'asc',\n          },\n        ],\n      });\n    }\n  }\n\n  public searchItems(items: any[]): any[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: any) {\n        let property: any;\n\n        for (property in item) {\n          if (\n            item.hasOwnProperty(property) &&\n            (property === 'name' || property === 'description')\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n        return false;\n      });\n    }\n    return searchedItems;\n  }\n\n  public filterItems(items: any[]): any[] {\n    let filteredItems = items;\n    const filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      const filters = filterData.filters;\n      filteredItems = items.filter((item: any) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport {\n  ColDef,\n  ColumnApi,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  RowSelectedEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-manager-data-grid-docs-demo-view-grid',\n  templateUrl: './data-manager-data-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridsDocsDemoViewGridComponent implements OnInit {\n  @Input()\n  public items: any[] = [];\n\n  public viewId = 'dataGridWithDataManagerView';\n\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      field: 'name',\n      headerName: 'Name',\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n  ];\n\n  public dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: any[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate: string;\n  public isActive = false;\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Data Grid View',\n    icon: 'table',\n    searchEnabled: true,\n    sortEnabled: true,\n    multiselectToolbarEnabled: true,\n    columnPickerEnabled: true,\n    filterButtonEnabled: true,\n    columnOptions: [\n      {\n        id: 'selected',\n        label: 'selected',\n        alwaysDisplayed: true,\n      },\n      {\n        id: 'name',\n        label: 'Name',\n        description: 'The name of the employee.',\n      },\n      {\n        id: 'age',\n        label: 'Age',\n        description: 'The age of the employee.',\n      },\n      {\n        id: 'startDate',\n        label: 'Start date',\n        description: 'The start date of the employee.',\n      },\n      {\n        id: 'endDate',\n        label: 'End date',\n        description: 'The end date of the employee.',\n      },\n      {\n        id: 'department',\n        label: 'Department',\n        description: 'The department of the employee',\n      },\n      {\n        id: 'jobTitle',\n        label: 'Title',\n        description: 'The job title of the employee.',\n      },\n    ],\n  };\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n  }\n\n  public ngOnInit(): void {\n    this.displayedItems = this.items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.setInitialColumnOrder();\n        this.updateData();\n        this.changeDetector.detectChanges();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isActive = id === this.viewId;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public updateData(): void {\n    this.sortItems();\n    this.displayedItems = this.filterItems(this.searchItems(this.items));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\n    }\n\n    if (this.displayedItems.length > 0) {\n      this.gridApi?.hideOverlay();\n    } else {\n      this.gridApi?.showNoRowsOverlay();\n    }\n\n    this.changeDetector.markForCheck();\n  }\n\n  public setInitialColumnOrder(): void {\n    const viewState = this.dataState.getViewStateById(this.viewId);\n    const visibleColumns = viewState.displayedColumnIds;\n\n    this.columnDefs.sort((col1, col2) => {\n      const col1Index = visibleColumns.findIndex(\n        (colId: string) => colId === col1.colId\n      );\n      const col2Index = visibleColumns.findIndex(\n        (colId: string) => colId === col2.colId\n      );\n\n      if (col1Index === -1) {\n        col1.hide = true;\n        return 0;\n      } else if (col2Index === -1) {\n        col2.hide = true;\n        return 0;\n      } else {\n        return col1Index - col2Index;\n      }\n    });\n\n    this.gridInitialized = true;\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.columnApi = gridReadyEvent.columnApi;\n    this.updateData();\n    this.changeDetector.markForCheck();\n  }\n\n  public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n    if (!rowSelectedEvent.data.selected) {\n      this.updateData();\n    }\n  }\n\n  public sortItems(): void {\n    const sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      this.columnApi.applyColumnState({\n        state: [\n          {\n            colId: sortOption.propertyName,\n            sort: sortOption.descending ? 'desc' : 'asc',\n          },\n        ],\n      });\n    }\n  }\n\n  public searchItems(items: any[]): any[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: any) {\n        let property: any;\n\n        for (property in item) {\n          if (\n            Object.prototype.hasOwnProperty.call(item, property) &&\n            (property === 'name' || property === 'description')\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n        return false;\n      });\n    }\n    return searchedItems;\n  }\n\n  public filterItems(items: any[]): any[] {\n    let filteredItems = items;\n    const filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      const filters = filterData.filters;\n      filteredItems = items.filter((item: any) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
     },
     {
       "fileName": "data-manager-data-grid-docs-demo.component.html",

package/package.json

@@ -1,24 +1,6 @@
 {
   "name": "@skyux/ag-grid",
-  "version": "5.6.0",
-  "peerDependencies": {
-    "@angular/common": "^12.2.16",
-    "@angular/core": "^12.2.16",
-    "ag-grid-angular": "^26.0.0",
-    "ag-grid-community": "^26.0.0",
-    "@skyux/autonumeric": "5.6.0",
-    "@skyux/data-manager": "5.6.0",
-    "@skyux/datetime": "5.6.0",
-    "@skyux/forms": "5.6.0",
-    "@skyux/i18n": "5.6.0",
-    "@skyux/indicators": "5.6.0",
-    "@skyux/layout": "5.6.0",
-    "@skyux/lookup": "5.6.0",
-    "@skyux/popovers": "5.6.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.1"
-  },
+  "version": "5.6.1",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -33,6 +15,27 @@
     "url": "https://github.com/blackbaud/skyux/issues"
   },
   "homepage": "https://github.com/blackbaud/skyux#readme",
+  "peerDependencies": {
+    "@angular/common": "^12.2.16",
+    "@angular/core": "^12.2.16",
+    "@angular/forms": "^12.2.16",
+    "@skyux/autonumeric": "5.6.1",
+    "@skyux/core": "5.6.1",
+    "@skyux/data-manager": "5.6.1",
+    "@skyux/datetime": "5.6.1",
+    "@skyux/forms": "5.6.1",
+    "@skyux/i18n": "5.6.1",
+    "@skyux/indicators": "5.6.1",
+    "@skyux/layout": "5.6.1",
+    "@skyux/lookup": "5.6.1",
+    "@skyux/popovers": "5.6.1",
+    "@skyux/theme": "5.6.1",
+    "ag-grid-angular": "^26.0.0",
+    "ag-grid-community": "^26.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.1"
+  },
   "main": "bundles/skyux-ag-grid.umd.js",
   "module": "fesm2015/skyux-ag-grid.js",
   "es2015": "fesm2015/skyux-ag-grid.js",