@skyux/data-manager 9.0.0-alpha.0 → 9.0.0-alpha.1
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 +29 -29
- package/package.json +9 -9
package/documentation.json
CHANGED
|
@@ -4833,29 +4833,24 @@
|
|
|
4833
4833
|
},
|
|
4834
4834
|
"codeExamples": [
|
|
4835
4835
|
{
|
|
4836
|
-
"fileName": "data-
|
|
4837
|
-
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-
|
|
4838
|
-
"rawContents": "
|
|
4839
|
-
},
|
|
4840
|
-
{
|
|
4841
|
-
"fileName": "data-filter-modal.component.ts",
|
|
4842
|
-
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-filter-modal.component.ts",
|
|
4843
|
-
"rawContents": "import { Component, OnInit, inject } 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-filter-modal-form',\n templateUrl: './data-filter-modal.component.html',\n})\nexport class DataManagerFiltersModalDemoComponent implements OnInit {\n public fruitType: string | undefined;\n\n public hideOrange: boolean | undefined;\n\n #context = inject(SkyDataManagerFilterModalContext);\n #instance = inject(SkyModalInstance);\n\n public ngOnInit(): void {\n if (this.#context.filterData && this.#context.filterData.filters) {\n const filters = this.#context.filterData.filters;\n this.fruitType = filters.type || 'any';\n this.hideOrange = filters.hideOrange || false;\n }\n }\n\n public applyFilters(): void {\n const result: SkyDataManagerFilterData = {};\n\n result.filtersApplied = this.fruitType !== 'any' || this.hideOrange;\n result.filters = {\n type: this.fruitType,\n hideOrange: this.hideOrange,\n };\n\n this.#instance.save(result);\n }\n\n public clearAllFilters(): void {\n this.hideOrange = false;\n this.fruitType = 'any';\n }\n\n public cancel(): void {\n this.#instance.cancel();\n }\n}\n"
|
|
4836
|
+
"fileName": "data-view-repeater.component.ts",
|
|
4837
|
+
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-view-repeater.component.ts",
|
|
4838
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnDestroy,\n OnInit,\n inject,\n} from '@angular/core';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyDataManagerDemoRow } from './data-manager-demo-data';\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, OnDestroy {\n @Input()\n public items: SkyDataManagerDemoRow[] = [];\n\n public readonly viewId = 'repeaterView';\n\n public displayedItems: SkyDataManagerDemoRow[] = [];\n public isActive = false;\n\n #dataState = new SkyDataManagerState({});\n #ngUnsubscribe = new Subject<void>();\n\n #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(),\n onSelectAllClick: () => this.#selectAll(),\n };\n\n #changeDetector = inject(ChangeDetectorRef);\n #dataManagerSvc = inject(SkyDataManagerService);\n\n public ngOnInit(): void {\n this.displayedItems = this.items;\n\n this.#dataManagerSvc.initDataView(this.#viewConfig);\n\n this.#dataManagerSvc\n .getDataStateUpdates(this.viewId)\n .pipe(takeUntil(this.#ngUnsubscribe))\n .subscribe((state) => {\n this.#dataState = state;\n this.#updateData();\n });\n\n this.#dataManagerSvc\n .getActiveViewIdUpdates()\n .pipe(takeUntil(this.#ngUnsubscribe))\n .subscribe((id) => {\n this.isActive = id === this.viewId;\n this.#changeDetector.markForCheck();\n });\n }\n\n public ngOnDestroy(): void {\n this.#ngUnsubscribe.next();\n this.#ngUnsubscribe.complete();\n }\n\n public onItemSelect(isSelected: boolean, item: SkyDataManagerDemoRow): 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.#dataManagerSvc.updateDataState(this.#dataState, this.viewId);\n\n if (this.#dataState.onlyShowSelected && this.displayedItems) {\n this.displayedItems = this.displayedItems.filter((itm) => itm.selected);\n this.#changeDetector.markForCheck();\n }\n }\n\n #updateData(): void {\n const selectedIds = this.#dataState.selectedIds || [];\n\n this.items.forEach((item) => {\n item.selected = selectedIds.indexOf(item.id) !== -1;\n });\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.markForCheck();\n }\n\n #searchItems(items: SkyDataManagerDemoRow[]): SkyDataManagerDemoRow[] {\n let searchedItems = items;\n const searchText =\n this.#dataState && this.#dataState.searchText?.toUpperCase();\n\n if (searchText) {\n searchedItems = items.filter(function (item: SkyDataManagerDemoRow) {\n let property: keyof typeof item;\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\n return searchedItems;\n }\n\n #filterItems(items: SkyDataManagerDemoRow[]): SkyDataManagerDemoRow[] {\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: SkyDataManagerDemoRow) => {\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\n return false;\n });\n }\n\n return filteredItems;\n }\n\n #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.#dataManagerSvc.updateDataState(this.#dataState, this.viewId);\n this.#changeDetector.markForCheck();\n }\n\n #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.#dataManagerSvc.updateDataState(this.#dataState, this.viewId);\n this.#changeDetector.markForCheck();\n }\n}\n"
|
|
4844
4839
|
},
|
|
4845
4840
|
{
|
|
4846
|
-
"fileName": "data-
|
|
4847
|
-
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-
|
|
4848
|
-
"rawContents": "
|
|
4841
|
+
"fileName": "data-view-repeater.component.html",
|
|
4842
|
+
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-view-repeater.component.html",
|
|
4843
|
+
"rawContents": "<sky-data-view [viewId]=\"viewId\">\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"
|
|
4849
4844
|
},
|
|
4850
4845
|
{
|
|
4851
|
-
"fileName": "data-
|
|
4852
|
-
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-
|
|
4853
|
-
"rawContents": "
|
|
4846
|
+
"fileName": "data-view-grid.component.ts",
|
|
4847
|
+
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-view-grid.component.ts",
|
|
4848
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnDestroy,\n OnInit,\n inject,\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';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyDataManagerDemoRow } from './data-manager-demo-data';\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, OnDestroy {\n @Input()\n public items: SkyDataManagerDemoRow[] = [];\n\n public readonly viewId = 'gridView';\n\n public displayedItems: SkyDataManagerDemoRow[] = [];\n public gridInitialized = false;\n public gridOptions: GridOptions;\n public isActive = false;\n public noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\n\n #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 #columnApi?: ColumnApi;\n #dataState = new SkyDataManagerState({});\n #gridApi?: GridApi;\n #ngUnsubscribe = new Subject<void>();\n\n #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 #agGridSvc = inject(SkyAgGridService);\n #changeDetector = inject(ChangeDetectorRef);\n #dataManagerSvc = inject(SkyDataManagerService);\n\n constructor() {\n this.gridOptions = this.#agGridSvc.getGridOptions({\n gridOptions: {\n columnDefs: this.#columnDefs,\n onGridReady: (args) => {\n this.#onGridReady(args);\n },\n },\n });\n }\n\n public ngOnInit(): void {\n this.displayedItems = this.items;\n\n this.#dataManagerSvc.initDataView(this.#viewConfig);\n\n this.#dataManagerSvc\n .getDataStateUpdates(this.viewId)\n .pipe(takeUntil(this.#ngUnsubscribe))\n .subscribe((state) => {\n this.#dataState = state;\n this.#setInitialColumnOrder();\n this.#updateData();\n this.#changeDetector.markForCheck();\n });\n\n this.#dataManagerSvc\n .getActiveViewIdUpdates()\n .pipe(takeUntil(this.#ngUnsubscribe))\n .subscribe((id) => {\n this.isActive = id === this.viewId;\n this.#changeDetector.markForCheck();\n });\n }\n\n public ngOnDestroy(): void {\n this.#ngUnsubscribe.next();\n this.#ngUnsubscribe.complete();\n }\n\n public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n if (!rowSelectedEvent.data.selected) {\n this.#updateData();\n }\n }\n\n #filterItems(items: SkyDataManagerDemoRow[]): SkyDataManagerDemoRow[] {\n let filteredItems = items;\n\n const filterData = this.#dataState && this.#dataState.filterData;\n\n if (filterData && filterData.filters) {\n const filters = filterData.filters;\n\n filteredItems = items.filter((item) => {\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 #onGridReady(event: GridReadyEvent): void {\n this.#columnApi = event.columnApi;\n this.#gridApi = event.api;\n this.#gridApi.sizeColumnsToFit();\n this.#updateData();\n }\n\n #searchItems(items: SkyDataManagerDemoRow[]): SkyDataManagerDemoRow[] {\n let searchedItems = items;\n const searchText = this.#dataState && this.#dataState.searchText;\n\n if (searchText) {\n searchedItems = items.filter(function (item: SkyDataManagerDemoRow) {\n let property: keyof typeof item;\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 #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 #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 #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"
|
|
4854
4849
|
},
|
|
4855
4850
|
{
|
|
4856
|
-
"fileName": "data-
|
|
4857
|
-
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-
|
|
4858
|
-
"rawContents": "
|
|
4851
|
+
"fileName": "data-view-grid.component.html",
|
|
4852
|
+
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-view-grid.component.html",
|
|
4853
|
+
"rawContents": "<sky-data-view skyAgGridDataManagerAdapter [viewId]=\"viewId\">\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"
|
|
4859
4854
|
},
|
|
4860
4855
|
{
|
|
4861
4856
|
"fileName": "data-manager-demo.module.ts",
|
|
@@ -4863,24 +4858,29 @@
|
|
|
4863
4858
|
"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, SkyInputBoxModule } 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 DataViewGridDemoComponent,\n DataViewRepeaterDemoComponent,\n ],\n imports: [\n AgGridModule,\n CommonModule,\n FormsModule,\n SkyAgGridModule,\n SkyCheckboxModule,\n SkyDataManagerModule,\n SkyInputBoxModule,\n SkyModalModule,\n SkyRepeaterModule,\n SkyToolbarModule,\n ],\n exports: [DataManagerDemoComponent],\n})\nexport class DataManagerDemoModule {}\n"
|
|
4864
4859
|
},
|
|
4865
4860
|
{
|
|
4866
|
-
"fileName": "data-
|
|
4867
|
-
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-
|
|
4868
|
-
"rawContents": "
|
|
4861
|
+
"fileName": "data-manager-demo.component.ts",
|
|
4862
|
+
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-manager-demo.component.ts",
|
|
4863
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n Component,\n OnInit,\n inject,\n} from '@angular/core';\nimport { SkyUIConfigService } from '@skyux/core';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n} from '@skyux/data-manager';\n\nimport { DataManagerFiltersModalDemoComponent } from './data-filter-modal.component';\nimport {\n SKY_DATA_MANAGER_DEMO_DATA,\n SkyDataManagerDemoRow,\n} from './data-manager-demo-data';\n\n@Component({\n selector: 'app-data-manager-demo',\n templateUrl: './data-manager-demo.component.html',\n providers: [SkyDataManagerService, SkyUIConfigService],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDemoComponent implements OnInit {\n public items: SkyDataManagerDemoRow[] = SKY_DATA_MANAGER_DEMO_DATA;\n\n #dataManagerService = inject(SkyDataManagerService);\n\n public ngOnInit(): void {\n this.#dataManagerService.initDataManager({\n activeViewId: 'repeaterView',\n dataManagerConfig: {\n filterModalComponent: DataManagerFiltersModalDemoComponent,\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 defaultDataState: new SkyDataManagerState({\n filterData: {\n filtersApplied: true,\n filters: {\n hideOrange: true,\n },\n },\n views: [\n {\n viewId: 'gridView',\n displayedColumnIds: ['selected', 'name', 'description'],\n },\n ],\n }),\n });\n }\n}\n"
|
|
4869
4864
|
},
|
|
4870
4865
|
{
|
|
4871
|
-
"fileName": "data-
|
|
4872
|
-
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-
|
|
4873
|
-
"rawContents": "
|
|
4866
|
+
"fileName": "data-manager-demo.component.html",
|
|
4867
|
+
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-manager-demo.component.html",
|
|
4868
|
+
"rawContents": "<sky-data-manager>\n <sky-data-manager-toolbar> </sky-data-manager-toolbar>\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"
|
|
4874
4869
|
},
|
|
4875
4870
|
{
|
|
4876
|
-
"fileName": "data-
|
|
4877
|
-
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-
|
|
4878
|
-
"rawContents": "
|
|
4871
|
+
"fileName": "data-manager-demo-data.ts",
|
|
4872
|
+
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-manager-demo-data.ts",
|
|
4873
|
+
"rawContents": "export interface SkyDataManagerDemoRow {\n selected?: boolean;\n id: string;\n name: string;\n description: string;\n type: string;\n color: string;\n}\n\nexport const SKY_DATA_MANAGER_DEMO_DATA: SkyDataManagerDemoRow[] = [\n {\n id: '1',\n name: 'Orange',\n description: 'A round, orange fruit. A great source of vitamin C.',\n type: 'citrus',\n color: 'orange',\n },\n {\n id: '2',\n name: 'Mango',\n description:\n \"Very difficult to peel. Delicious in smoothies, but don't eat the skin.\",\n type: 'other',\n color: 'orange',\n },\n {\n id: '3',\n name: 'Lime',\n description: 'A sour, green fruit used in many drinks. It grows on trees.',\n type: 'citrus',\n color: 'green',\n },\n {\n id: '4',\n name: 'Strawberry',\n description:\n 'A red fruit that goes well with shortcake. It is the name of both the fruit and the plant!',\n type: 'berry',\n color: 'red',\n },\n {\n id: '5',\n name: 'Blueberry',\n description:\n 'A small, blue fruit often found in muffins. When not ripe, they can be sour.',\n type: 'berry',\n color: 'blue',\n },\n {\n id: '6',\n name: 'Banana',\n description:\n 'A yellow fruit with a thick skin. Monkeys love them, and in some countries it is customary to eat the peel.',\n type: 'other',\n color: 'yellow',\n },\n];\n"
|
|
4879
4874
|
},
|
|
4880
4875
|
{
|
|
4881
|
-
"fileName": "data-
|
|
4882
|
-
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-
|
|
4883
|
-
"rawContents": "import {
|
|
4876
|
+
"fileName": "data-filter-modal.component.ts",
|
|
4877
|
+
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-filter-modal.component.ts",
|
|
4878
|
+
"rawContents": "import { Component, OnInit, inject } 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-filter-modal-form',\n templateUrl: './data-filter-modal.component.html',\n})\nexport class DataManagerFiltersModalDemoComponent implements OnInit {\n public fruitType: string | undefined;\n\n public hideOrange: boolean | undefined;\n\n #context = inject(SkyDataManagerFilterModalContext);\n #instance = inject(SkyModalInstance);\n\n public ngOnInit(): void {\n if (this.#context.filterData && this.#context.filterData.filters) {\n const filters = this.#context.filterData.filters;\n this.fruitType = filters.type || 'any';\n this.hideOrange = filters.hideOrange || false;\n }\n }\n\n public applyFilters(): void {\n const result: SkyDataManagerFilterData = {};\n\n result.filtersApplied = this.fruitType !== 'any' || this.hideOrange;\n result.filters = {\n type: this.fruitType,\n hideOrange: this.hideOrange,\n };\n\n this.#instance.save(result);\n }\n\n public clearAllFilters(): void {\n this.hideOrange = false;\n this.fruitType = 'any';\n }\n\n public cancel(): void {\n this.#instance.cancel();\n }\n}\n"
|
|
4879
|
+
},
|
|
4880
|
+
{
|
|
4881
|
+
"fileName": "data-filter-modal.component.html",
|
|
4882
|
+
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-filter-modal.component.html",
|
|
4883
|
+
"rawContents": "<sky-modal>\n <sky-modal-header> Filter your fruit </sky-modal-header>\n <sky-modal-content>\n <sky-input-box labelText=\"Fruit type\" stacked=\"true\">\n <select class=\"sky-form-control\" [(ngModel)]=\"fruitType\">\n <option value=\"any\">Any fruit</option>\n <option value=\"citrus\">Citrus</option>\n <option value=\"berry\">Berry</option>\n </select>\n </sky-input-box>\n <sky-checkbox [(ngModel)]=\"hideOrange\">\n <sky-checkbox-label> Hide orange fruits </sky-checkbox-label>\n </sky-checkbox>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n (click)=\"applyFilters()\"\n >\n Apply filters\n </button>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\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"
|
|
4884
4884
|
}
|
|
4885
4885
|
]
|
|
4886
4886
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/data-manager",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.1",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -33,14 +33,14 @@
|
|
|
33
33
|
"@angular/common": "^16.1.7",
|
|
34
34
|
"@angular/core": "^16.1.7",
|
|
35
35
|
"@angular/forms": "^16.1.7",
|
|
36
|
-
"@skyux/core": "9.0.0-alpha.
|
|
37
|
-
"@skyux/forms": "9.0.0-alpha.
|
|
38
|
-
"@skyux/i18n": "9.0.0-alpha.
|
|
39
|
-
"@skyux/indicators": "9.0.0-alpha.
|
|
40
|
-
"@skyux/layout": "9.0.0-alpha.
|
|
41
|
-
"@skyux/lists": "9.0.0-alpha.
|
|
42
|
-
"@skyux/lookup": "9.0.0-alpha.
|
|
43
|
-
"@skyux/modals": "9.0.0-alpha.
|
|
36
|
+
"@skyux/core": "9.0.0-alpha.1",
|
|
37
|
+
"@skyux/forms": "9.0.0-alpha.1",
|
|
38
|
+
"@skyux/i18n": "9.0.0-alpha.1",
|
|
39
|
+
"@skyux/indicators": "9.0.0-alpha.1",
|
|
40
|
+
"@skyux/layout": "9.0.0-alpha.1",
|
|
41
|
+
"@skyux/lists": "9.0.0-alpha.1",
|
|
42
|
+
"@skyux/lookup": "9.0.0-alpha.1",
|
|
43
|
+
"@skyux/modals": "9.0.0-alpha.1"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"tslib": "^2.5.0"
|