@skyux/data-manager 6.14.0 → 6.15.0

package/documentation.json

@@ -4914,7 +4914,7 @@
     {
       "fileName": "data-manager-demo.component.html",
       "filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-manager-demo.component.html",
-      "rawContents": "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <!-- <sky-data-manager-toolbar-primary-item *ngIf=\"activeViewId === 'repeaterView'\">\n      <button\n        type=\"button\"\n        class=\"sky-btn sky-btn-primary\"\n        (click)=\"searchSo()\"\n      >\n        Set search text to \"so\"\n      </button>\n    </sky-data-manager-toolbar-primary-item> -->\n  </sky-data-manager-toolbar>\n\n  <app-data-view-repeater-demo [items]=\"items\"> </app-data-view-repeater-demo>\n  <app-data-view-cards-demo [items]=\"items\"> </app-data-view-cards-demo>\n</sky-data-manager>\n"
+      "rawContents": "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <!-- <sky-data-manager-toolbar-primary-item *ngIf=\"activeViewId === 'repeaterView'\">\n      <button\n        type=\"button\"\n        class=\"sky-btn sky-btn-primary\"\n        (click)=\"searchSo()\"\n      >\n        Set search text to \"so\"\n      </button>\n    </sky-data-manager-toolbar-primary-item> -->\n  </sky-data-manager-toolbar>\n\n  <app-data-view-repeater-demo [items]=\"items\"> </app-data-view-repeater-demo>\n  <app-data-view-grid-demo [items]=\"items\"></app-data-view-grid-demo>\n</sky-data-manager>\n"
     },
     {
       "fileName": "data-manager-demo.component.ts",
@@ -4924,27 +4924,27 @@
     {
       "fileName": "data-manager-demo.module.ts",
       "filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-manager-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyCardModule, SkyToolbarModule } from '@skyux/layout';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { DataManagerFiltersModalDemoComponent } from './data-filter-modal.component';\nimport { DataManagerDemoComponent } from './data-manager-demo.component';\nimport { DataViewCardsDemoComponent } from './data-view-cards.component';\nimport { DataViewRepeaterDemoComponent } from './data-view-repeater.component';\n\n@NgModule({\n  declarations: [\n    DataManagerDemoComponent,\n    DataManagerFiltersModalDemoComponent,\n    DataViewCardsDemoComponent,\n    DataViewRepeaterDemoComponent,\n  ],\n  imports: [\n    CommonModule,\n    FormsModule,\n    SkyCardModule,\n    SkyCheckboxModule,\n    SkyDataManagerModule,\n    SkyModalModule,\n    SkyRepeaterModule,\n    SkyToolbarModule,\n  ],\n  exports: [DataManagerDemoComponent],\n})\nexport class DataManagerDemoModule {}\n"
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } 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 { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { DataManagerFiltersModalDemoComponent } from './data-filter-modal.component';\nimport { DataManagerDemoComponent } from './data-manager-demo.component';\nimport { DataViewGridDemoComponent } from './data-view-grid.component';\nimport { DataViewRepeaterDemoComponent } from './data-view-repeater.component';\n\n@NgModule({\n  declarations: [\n    DataManagerDemoComponent,\n    DataManagerFiltersModalDemoComponent,\n    DataViewRepeaterDemoComponent,\n    DataViewGridDemoComponent,\n  ],\n  imports: [\n    CommonModule,\n    FormsModule,\n    SkyCheckboxModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n    SkyModalModule,\n    SkyRepeaterModule,\n    SkyToolbarModule,\n  ],\n  exports: [DataManagerDemoComponent],\n})\nexport class DataManagerDemoModule {}\n"
     },
     {
-      "fileName": "data-view-cards.component.html",
-      "filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-view-cards.component.html",
-      "rawContents": "<sky-data-view [viewId]=\"viewConfig.id\">\n  <div style=\"margin: 10px\">\n    <sky-card size=\"small\" *ngFor=\"let item of displayedItems\">\n      <sky-card-title>{{ item.name }}</sky-card-title>\n      <sky-card-content>{{ item.description }}</sky-card-content>\n    </sky-card>\n  </div>\n\n  <button type=\"button\" class=\"sky-btn sky-btn-primary\" (click)=\"searchBe()\">\n    Set search text to \"be\"\n  </button>\n</sky-data-view>\n"
+      "fileName": "data-view-grid.component.html",
+      "filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-view-grid.component.html",
+      "rawContents": "<sky-data-view skyAgGridDataManagerAdapter [viewId]=\"viewConfig.id\">\n  <sky-ag-grid-wrapper *ngIf=\"isActive && gridInitialized\">\n    <ag-grid-angular\n      [gridOptions]=\"gridOptions\"\n      [overlayNoRowsTemplate]=\"noRowsTemplate\"\n      [rowData]=\"displayedItems\"\n      (rowSelected)=\"onRowSelected($event)\"\n    >\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</sky-data-view>\n"
     },
     {
-      "fileName": "data-view-cards.component.ts",
-      "filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-view-cards.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnInit,\n} from '@angular/core';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\n@Component({\n  selector: 'app-data-view-cards-demo',\n  templateUrl: './data-view-cards.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataViewCardsDemoComponent implements OnInit {\n  @Input()\n  public items: any[];\n\n  public dataState: SkyDataManagerState;\n  public displayedItems: any[];\n  public viewId = 'cardsView';\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Cards View',\n    icon: 'th-large',\n    sortEnabled: true,\n    searchEnabled: true,\n    filterButtonEnabled: true,\n    showSortButtonText: true,\n  };\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {}\n\n  public ngOnInit(): void {\n    this.displayedItems = this.items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.displayedItems = this.sortItems(\n          this.filterItems(this.searchItems(this.items))\n        );\n        this.changeDetector.detectChanges();\n      });\n  }\n\n  public sortItems(items: any[]): any[] {\n    let result = items;\n    const sortOption = this.dataState && this.dataState.activeSortOption;\n\n    if (sortOption) {\n      result = items.sort(function (a: any, b: any) {\n        const descending = sortOption.descending ? -1 : 1,\n          sortProperty = sortOption.propertyName;\n\n        if (a[sortProperty] > b[sortProperty]) {\n          return descending;\n        } else if (a[sortProperty] < b[sortProperty]) {\n          return -1 * descending;\n        } else {\n          return 0;\n        }\n      });\n    }\n\n    return result;\n  }\n\n  public searchItems(items: any[]): any[] {\n    let searchedItems = items;\n    const searchText =\n      this.dataState && this.dataState.searchText?.toUpperCase();\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].toUpperCase();\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    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        if (\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          return true;\n        }\n        return false;\n      });\n    }\n\n    return filteredItems;\n  }\n\n  public searchBe(): void {\n    this.dataState.searchText = 'be';\n    this.dataManagerService.updateDataState(this.dataState, 'searchButton');\n  }\n}\n"
+      "fileName": "data-view-grid.component.ts",
+      "filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-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  ColumnState,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  RowSelectedEvent,\n} from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-view-grid-demo',\n  templateUrl: './data-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataViewGridDemoComponent implements OnInit {\n  @Input()\n  public items: any[] = [];\n\n  public viewId = 'gridView';\n\n  public columnDefs: ColDef[] = [\n    {\n      colId: 'selected',\n      field: 'selected',\n      headerName: '',\n      maxWidth: 50,\n      type: SkyCellType.RowSelector,\n      suppressMovable: true,\n      lockPosition: true,\n      lockVisible: true,\n    },\n    {\n      colId: 'name',\n      field: 'name',\n      headerName: 'Fruit name',\n      width: 150,\n    },\n    {\n      colId: 'description',\n      field: 'description',\n      headerName: 'Description',\n    },\n  ];\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        alwaysDisplayed: true,\n        label: 'selected',\n      },\n      {\n        id: 'name',\n        label: 'Fruit name',\n        description: 'The name of the fruit.',\n      },\n      {\n        id: 'description',\n        label: 'Description',\n        description: 'Some information about the fruit.',\n      },\n    ],\n  };\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  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-font-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\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  }\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  }\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      const sort: ColumnState[] = [\n        {\n          colId: sortOption.propertyName,\n          sort: sortOption.descending ? 'desc' : 'asc',\n        },\n      ];\n\n      this.columnApi.applyColumnState({\n        state: sort,\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    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.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"
     },
     {
       "fileName": "data-view-repeater.component.html",
       "filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-view-repeater.component.html",
-      "rawContents": "<sky-data-view [viewId]=\"viewConfig.id\">\n  <sky-repeater *ngIf=\"isActive\" expandMode=\"none\">\n    <sky-repeater-item\n      *ngFor=\"let item of displayedItems\"\n      selectable=\"true\"\n      [(isSelected)]=\"item.selected\"\n      (isSelectedChange)=\"onItemSelect($event, item)\"\n    >\n      <sky-repeater-item-title>\n        {{ item.name }}\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <div>\n          {{ item.description }}\n        </div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  </sky-repeater>\n</sky-data-view>\n"
+      "rawContents": "<sky-data-view [viewId]=\"viewConfig.id\">\n  <sky-repeater *ngIf=\"isActive\" expandMode=\"none\">\n    <sky-repeater-item\n      *ngFor=\"let item of displayedItems\"\n      [selectable]=\"true\"\n      [(isSelected)]=\"item.selected\"\n      (isSelectedChange)=\"onItemSelect($event, item)\"\n    >\n      <sky-repeater-item-title>\n        {{ item.name }}\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <div>\n          {{ item.description }}\n        </div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  </sky-repeater>\n</sky-data-view>\n"
     },
     {
       "fileName": "data-view-repeater.component.ts",
       "filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-view-repeater.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnInit,\n} from '@angular/core';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\n@Component({\n  selector: 'app-data-view-repeater-demo',\n  templateUrl: './data-view-repeater.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataViewRepeaterDemoComponent implements OnInit {\n  @Input()\n  public items: any[];\n\n  public dataState = new SkyDataManagerState({});\n\n  public displayedItems: any[];\n\n  public isActive: boolean;\n\n  public viewId = 'repeaterView';\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Repeater View',\n    icon: 'list',\n    searchEnabled: true,\n    filterButtonEnabled: true,\n    multiselectToolbarEnabled: true,\n    onClearAllClick: this.clearAll.bind(this),\n    onSelectAllClick: this.selectAll.bind(this),\n  };\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {}\n\n  public ngOnInit(): void {\n    this.displayedItems = this.items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.updateData();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isActive = id === this.viewId;\n    });\n  }\n\n  public updateData(): void {\n    const selectedIds = this.dataState.selectedIds || [];\n    this.items.forEach((item) => {\n      item.selected = selectedIds.indexOf(item.id) !== -1;\n    });\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    this.changeDetector.detectChanges();\n  }\n\n  public searchItems(items: any[]): any[] {\n    let searchedItems = items;\n    const searchText =\n      this.dataState && this.dataState.searchText?.toUpperCase();\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].toUpperCase();\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    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        if (\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          return true;\n        }\n        return false;\n      });\n    }\n\n    return filteredItems;\n  }\n\n  public selectAll(): void {\n    const 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    this.changeDetector.markForCheck();\n  }\n\n  public clearAll(): void {\n    const selectedIds = this.dataState.selectedIds || [];\n\n    this.displayedItems.forEach((item) => {\n      if (item.selected) {\n        const itemIndex = selectedIds.indexOf(item.id);\n        item.selected = false;\n        selectedIds.splice(itemIndex, 1);\n      }\n    });\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = [];\n    }\n\n    this.dataState.selectedIds = selectedIds;\n    this.dataManagerService.updateDataState(this.dataState, this.viewId);\n    this.changeDetector.markForCheck();\n  }\n\n  public onItemSelect(isSelected: boolean, item: any): void {\n    const selectedItems = this.dataState.selectedIds || [];\n    const itemIndex = selectedItems.indexOf(item.id);\n\n    if (isSelected && itemIndex === -1) {\n      selectedItems.push(item.id);\n    } else if (!isSelected && itemIndex !== -1) {\n      selectedItems.splice(itemIndex, 1);\n    }\n\n    this.dataState.selectedIds = selectedItems;\n    this.dataManagerService.updateDataState(this.dataState, this.viewId);\n    if (this.dataState.onlyShowSelected && this.displayedItems) {\n      this.displayedItems = this.displayedItems.filter((itm) => itm.selected);\n      this.changeDetector.markForCheck();\n    }\n  }\n}\n"
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnInit,\n} from '@angular/core';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\n@Component({\n  selector: 'app-data-view-repeater-demo',\n  templateUrl: './data-view-repeater.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataViewRepeaterDemoComponent implements OnInit {\n  @Input()\n  public items: any[];\n\n  public dataState = new SkyDataManagerState({});\n\n  public displayedItems: any[];\n\n  public isActive: boolean;\n\n  public viewId = 'repeaterView';\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Repeater View',\n    icon: 'list',\n    searchEnabled: true,\n    filterButtonEnabled: true,\n    multiselectToolbarEnabled: true,\n    onClearAllClick: this.clearAll.bind(this),\n    onSelectAllClick: this.selectAll.bind(this),\n  };\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {}\n\n  public ngOnInit(): void {\n    this.displayedItems = this.items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.updateData();\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    const selectedIds = this.dataState.selectedIds || [];\n    this.items.forEach((item) => {\n      item.selected = selectedIds.indexOf(item.id) !== -1;\n    });\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    this.changeDetector.detectChanges();\n  }\n\n  public searchItems(items: any[]): any[] {\n    let searchedItems = items;\n    const searchText =\n      this.dataState && this.dataState.searchText?.toUpperCase();\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].toUpperCase();\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    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        if (\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          return true;\n        }\n        return false;\n      });\n    }\n\n    return filteredItems;\n  }\n\n  public selectAll(): void {\n    const 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    this.changeDetector.markForCheck();\n  }\n\n  public clearAll(): void {\n    const selectedIds = this.dataState.selectedIds || [];\n\n    this.displayedItems.forEach((item) => {\n      if (item.selected) {\n        const itemIndex = selectedIds.indexOf(item.id);\n        item.selected = false;\n        selectedIds.splice(itemIndex, 1);\n      }\n    });\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = [];\n    }\n\n    this.dataState.selectedIds = selectedIds;\n    this.dataManagerService.updateDataState(this.dataState, this.viewId);\n    this.changeDetector.markForCheck();\n  }\n\n  public onItemSelect(isSelected: boolean, item: any): void {\n    const selectedItems = this.dataState.selectedIds || [];\n    const itemIndex = selectedItems.indexOf(item.id);\n\n    if (isSelected && itemIndex === -1) {\n      selectedItems.push(item.id);\n    } else if (!isSelected && itemIndex !== -1) {\n      selectedItems.splice(itemIndex, 1);\n    }\n\n    this.dataState.selectedIds = selectedItems;\n    this.dataManagerService.updateDataState(this.dataState, this.viewId);\n    if (this.dataState.onlyShowSelected && this.displayedItems) {\n      this.displayedItems = this.displayedItems.filter((itm) => itm.selected);\n      this.changeDetector.markForCheck();\n    }\n  }\n}\n"
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/data-manager",
-  "version": "6.14.0",
+  "version": "6.15.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -35,14 +35,14 @@
     "@angular/common": "^13.3.2",
     "@angular/core": "^13.3.2",
     "@angular/forms": "^13.3.2",
-    "@skyux/core": "6.14.0",
-    "@skyux/forms": "6.14.0",
-    "@skyux/i18n": "6.14.0",
-    "@skyux/indicators": "6.14.0",
-    "@skyux/layout": "6.14.0",
-    "@skyux/lists": "6.14.0",
-    "@skyux/lookup": "6.14.0",
-    "@skyux/modals": "6.14.0"
+    "@skyux/core": "6.15.0",
+    "@skyux/forms": "6.15.0",
+    "@skyux/i18n": "6.15.0",
+    "@skyux/indicators": "6.15.0",
+    "@skyux/layout": "6.15.0",
+    "@skyux/lists": "6.15.0",
+    "@skyux/lookup": "6.15.0",
+    "@skyux/modals": "6.15.0"
   },
   "dependencies": {
     "tslib": "^2.3.1"