@skyux/ag-grid 5.1.7 → 5.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +2 -2
- package/package.json +1 -1
package/documentation.json
CHANGED
|
@@ -777,7 +777,7 @@
|
|
|
777
777
|
{
|
|
778
778
|
"fileName": "basic-data-grid-docs-demo.component.ts",
|
|
779
779
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo.component.ts",
|
|
780
|
-
"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
|
|
780
|
+
"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"
|
|
781
781
|
},
|
|
782
782
|
{
|
|
783
783
|
"fileName": "basic-data-grid-docs-demo.module.ts",
|
|
@@ -807,7 +807,7 @@
|
|
|
807
807
|
{
|
|
808
808
|
"fileName": "data-manager-data-grid-docs-demo.component.ts",
|
|
809
809
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo.component.ts",
|
|
810
|
-
"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 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 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 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 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 'validationCurrency',\n 'validationDate',\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"
|
|
810
|
+
"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"
|
|
811
811
|
},
|
|
812
812
|
{
|
|
813
813
|
"fileName": "data-manager-data-grid-docs-demo.module.ts",
|