@skyux/list-builder-view-grids 5.8.2 → 5.9.0
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 +3 -3
- package/package.json +9 -9
package/documentation.json
CHANGED
|
@@ -2816,7 +2816,7 @@
|
|
|
2816
2816
|
{
|
|
2817
2817
|
"fileName": "list-view-grid-demo.component.ts",
|
|
2818
2818
|
"filePath": "/projects/list-builder-view-grids/documentation/code-examples/list-view-grid/data-provider/list-view-grid-demo.component.ts",
|
|
2819
|
-
"rawContents": "import { Component, Injectable } from '@angular/core';\nimport {\n ListDataProvider,\n ListDataRequestModel,\n ListDataResponseModel,\n} from '@skyux/list-builder';\nimport { ListItemModel } from '@skyux/list-builder-common';\n\nimport { BehaviorSubject, Observable, of } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\n@Injectable()\nexport class DemoListProvider extends ListDataProvider {\n public items: Observable<ListItemModel[]>;\n\n public remoteCount: BehaviorSubject<number> = new BehaviorSubject<number>(0);\n\n constructor() {\n super();\n this.items = of([\n {\n id: '0',\n data: {\n name: 'Orange',\n description: 'A round, orange fruit.',\n type: 'citrus',\n color: 'orange',\n highAcidity: 'True',\n ph: 3.71,\n },\n },\n {\n id: '1',\n data: {\n name: 'Mango',\n description: \"Delicious in smoothies, but don't eat the skin.\",\n type: 'other',\n color: 'orange',\n highAcidity: 'False',\n ph: 5.92,\n },\n },\n {\n id: '2',\n data: {\n name: 'Lime',\n description: 'A sour, green fruit used in many drinks.',\n type: 'citrus',\n color: 'green',\n highAcidity: 'True',\n ph: 2.5,\n },\n },\n {\n id: '3',\n data: {\n name: 'Strawberry',\n description: 'A red fruit that goes well with shortcake.',\n type: 'berry',\n color: 'red',\n highAcidity: 'True',\n ph: 3.84,\n },\n },\n {\n id: '4',\n data: {\n name: 'Blueberry',\n description: 'A small, blue fruit often found in muffins.',\n type: 'berry',\n color: 'blue',\n highAcidity: 'True',\n ph: 3.21,\n },\n },\n {\n id: '5',\n data: {\n name: 'Black Olives',\n description: 'A small fruit used on pizza.',\n type: 'other',\n color: 'black',\n highAcidity: 'False',\n ph: 6.14,\n },\n },\n ]);\n }\n\n public get(request: ListDataRequestModel): Observable<ListDataResponseModel> {\n /*\n In get() you get data based on a given ListDataRequestModel.\n You can fetch data remotely here and return an Observable<ListDataResponseModel>.\n */\n return this.fakeHttpRequest(request);\n }\n\n public count(): Observable<number> {\n return this.remoteCount;\n }\n\n private fakeHttpRequest(\n request: ListDataRequestModel\n ): Observable<ListDataResponseModel> {\n return this.items.pipe(\n map((items: ListItemModel[]) => {\n let modifiedList = items;\n\n if (request.search.searchText) {\n const searchText = request.search.searchText.toLowerCase();\n\n modifiedList = modifiedList.filter((item) => {\n return (\n item.data.name.toLowerCase().indexOf(searchText) > -1 ||\n item.data.description.toLowerCase().indexOf(searchText) > -1\n );\n });\n }\n\n if (request.filters) {\n for (const filter of request.filters) {\n if (filter.name === 'fruitType' && filter.value !== 'any') {\n modifiedList = modifiedList.filter((item) => {\n return item.data.type === request.filters[0].value;\n });\n } else if (filter.name === 'hideOrange' && filter.value) {\n modifiedList = modifiedList.filter(filter.filterFunction);\n }\n }\n }\n\n if (request.sort) {\n for (const fieldSelector of request.sort.fieldSelectors) {\n
|
|
2819
|
+
"rawContents": "import { Component, Injectable } from '@angular/core';\nimport {\n ListDataProvider,\n ListDataRequestModel,\n ListDataResponseModel,\n} from '@skyux/list-builder';\nimport { ListItemModel } from '@skyux/list-builder-common';\n\nimport { BehaviorSubject, Observable, of } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\n@Injectable()\nexport class DemoListProvider extends ListDataProvider {\n public items: Observable<ListItemModel[]>;\n\n public remoteCount: BehaviorSubject<number> = new BehaviorSubject<number>(0);\n\n constructor() {\n super();\n this.items = of([\n {\n id: '0',\n data: {\n name: 'Orange',\n description: 'A round, orange fruit.',\n type: 'citrus',\n color: 'orange',\n highAcidity: 'True',\n ph: 3.71,\n },\n },\n {\n id: '1',\n data: {\n name: 'Mango',\n description: \"Delicious in smoothies, but don't eat the skin.\",\n type: 'other',\n color: 'orange',\n highAcidity: 'False',\n ph: 5.92,\n },\n },\n {\n id: '2',\n data: {\n name: 'Lime',\n description: 'A sour, green fruit used in many drinks.',\n type: 'citrus',\n color: 'green',\n highAcidity: 'True',\n ph: 2.5,\n },\n },\n {\n id: '3',\n data: {\n name: 'Strawberry',\n description: 'A red fruit that goes well with shortcake.',\n type: 'berry',\n color: 'red',\n highAcidity: 'True',\n ph: 3.84,\n },\n },\n {\n id: '4',\n data: {\n name: 'Blueberry',\n description: 'A small, blue fruit often found in muffins.',\n type: 'berry',\n color: 'blue',\n highAcidity: 'True',\n ph: 3.21,\n },\n },\n {\n id: '5',\n data: {\n name: 'Black Olives',\n description: 'A small fruit used on pizza.',\n type: 'other',\n color: 'black',\n highAcidity: 'False',\n ph: 6.14,\n },\n },\n ]);\n }\n\n public get(request: ListDataRequestModel): Observable<ListDataResponseModel> {\n /*\n In get() you get data based on a given ListDataRequestModel.\n You can fetch data remotely here and return an Observable<ListDataResponseModel>.\n */\n return this.fakeHttpRequest(request);\n }\n\n public count(): Observable<number> {\n return this.remoteCount;\n }\n\n private fakeHttpRequest(\n request: ListDataRequestModel\n ): Observable<ListDataResponseModel> {\n return this.items.pipe(\n map((items: ListItemModel[]) => {\n let modifiedList = items;\n\n if (request.search.searchText) {\n const searchText = request.search.searchText.toLowerCase();\n\n modifiedList = modifiedList.filter((item) => {\n return (\n item.data.name.toLowerCase().indexOf(searchText) > -1 ||\n item.data.description.toLowerCase().indexOf(searchText) > -1\n );\n });\n }\n\n if (request.filters) {\n for (const filter of request.filters) {\n if (filter.name === 'fruitType' && filter.value !== 'any') {\n modifiedList = modifiedList.filter((item) => {\n return item.data.type === request.filters[0].value;\n });\n } else if (filter.name === 'hideOrange' && filter.value) {\n modifiedList = modifiedList.filter(filter.filterFunction);\n }\n }\n }\n\n if (request.sort) {\n for (const fieldSelector of request.sort.fieldSelectors) {\n modifiedList = modifiedList.sort((itemA: any, itemB: any) => {\n if (fieldSelector.descending) {\n return itemA.data[fieldSelector.fieldSelector] <\n itemB.data[fieldSelector.fieldSelector]\n ? 1\n : -1;\n } else {\n return itemA.data[fieldSelector.fieldSelector] <\n itemB.data[fieldSelector.fieldSelector]\n ? -1\n : 1;\n }\n });\n }\n }\n\n const itemStart = (request.pageNumber - 1) * request.pageSize;\n const pagedResult = modifiedList.slice(\n itemStart,\n itemStart + request.pageSize\n );\n\n this.remoteCount.next(modifiedList.length);\n\n return new ListDataResponseModel({\n count: modifiedList.length,\n items: pagedResult,\n });\n })\n );\n }\n}\n\n@Component({\n selector: 'app-list-view-grid-demo',\n templateUrl: './list-view-grid-demo.component.html',\n providers: [DemoListProvider],\n})\nexport class ListViewGridDemoComponent {\n constructor(public listDataProvider: DemoListProvider) {}\n\n public hideOrangeFilterFunction(\n item: ListItemModel,\n filterValue: any\n ): boolean {\n return !filterValue || (filterValue && item.data.color !== 'orange');\n }\n}\n"
|
|
2820
2820
|
},
|
|
2821
2821
|
{
|
|
2822
2822
|
"fileName": "list-view-grid-demo.module.ts",
|
|
@@ -2841,7 +2841,7 @@
|
|
|
2841
2841
|
{
|
|
2842
2842
|
"fileName": "list-view-grid-demo.component.html",
|
|
2843
2843
|
"filePath": "/projects/list-builder-view-grids/documentation/code-examples/list-view-grid/templated-column/list-view-grid-demo.component.html",
|
|
2844
|
-
"rawContents": "<sky-list [data]=\"data\">\n <sky-list-view-grid fit=\"scroll\" #grid>\n <sky-grid-column\n id=\"contextMenuColumn\"\n [locked]=\"true\"\n [template]=\"contextMenuTemplate\"\n [width]=\"50\"\n >\n </sky-grid-column>\n <sky-grid-column field=\"name\" heading=\"Name\"> </sky-grid-column>\n <sky-grid-column field=\"email\" heading=\"Email\"> </sky-grid-column>\n <sky-grid-column field=\"amount\" heading=\"Amount\"> </sky-grid-column>\n </sky-list-view-grid>\n</sky-list>\n\n<ng-template #contextMenuTemplate>\n <sky-dropdown buttonType=\"context-menu\">\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <button type=\"button\"
|
|
2844
|
+
"rawContents": "<sky-list [data]=\"data\">\n <sky-list-view-grid fit=\"scroll\" #grid>\n <sky-grid-column\n id=\"contextMenuColumn\"\n [locked]=\"true\"\n [template]=\"contextMenuTemplate\"\n [width]=\"50\"\n >\n </sky-grid-column>\n <sky-grid-column field=\"name\" heading=\"Name\"> </sky-grid-column>\n <sky-grid-column field=\"email\" heading=\"Email\"> </sky-grid-column>\n <sky-grid-column field=\"amount\" heading=\"Amount\"> </sky-grid-column>\n </sky-list-view-grid>\n</sky-list>\n\n<ng-template #contextMenuTemplate>\n <sky-dropdown buttonType=\"context-menu\">\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"onDropdownItemClicked('Make admin')\">\n Make admin\n </button>\n </sky-dropdown-item>\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"onDropdownItemClicked('Disable')\">\n Disable\n </button>\n </sky-dropdown-item>\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"onDropdownItemClicked('Delete')\">\n Delete\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n</ng-template>\n"
|
|
2845
2845
|
},
|
|
2846
2846
|
{
|
|
2847
2847
|
"fileName": "list-view-grid-demo.component.scss",
|
|
@@ -2851,7 +2851,7 @@
|
|
|
2851
2851
|
{
|
|
2852
2852
|
"fileName": "list-view-grid-demo.component.ts",
|
|
2853
2853
|
"filePath": "/projects/list-builder-view-grids/documentation/code-examples/list-view-grid/templated-column/list-view-grid-demo.component.ts",
|
|
2854
|
-
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-list-view-grid-demo',\n templateUrl: './list-view-grid-demo.component.html',\n styleUrls: ['./list-view-grid-demo.component.scss'],\n})\nexport class ListViewGridDemoComponent {\n public data: any[] = [\n {\n id: '1',\n name: 'Niels Bohr',\n email: 'niels.bohr@example.com',\n amount: 170.75,\n status: 'Paid',\n },\n {\n id: '2',\n name: 'Ada Lovelace',\n email: 'ada.lovelace@example.com',\n amount: 114.13,\n status: 'Paid',\n },\n {\n id: '3',\n name: 'Marie Curie',\n email: 'marie.curie@example.com',\n amount: 111,\n status: 'Past due',\n },\n {\n id: '4',\n name: 'Barbara McClintock',\n email: 'barbara.mcclintock@example.com',\n amount: 84.63,\n status: 'Paid',\n },\n {\n id: '5',\n name: 'Michael Faraday',\n email: 'michael.faraday@example.com',\n amount: 83.97,\n status: 'Paid',\n },\n {\n id: '6',\n name: 'Enrico Fermi',\n email: 'enrico.fermi@example.com',\n amount: 74.5,\n status: 'Past due',\n },\n {\n id: '7',\n name: 'Mae C. Jemison',\n email: 'mae.jemison@example.com',\n amount: 70.86,\n status: 'Paid',\n },\n {\n id: '8',\n name: 'Nikola Tesla',\n email: 'nikola.tesla@example.com',\n amount: 15.0,\n status: 'Paid',\n },\n {\n id: '9',\n name: 'Hubert J. Farnsworth',\n email: 'hubert.j.farnsworth@example.com',\n amount: 999.99,\n status: 'Past Due',\n },\n ];\n}\n"
|
|
2854
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-list-view-grid-demo',\n templateUrl: './list-view-grid-demo.component.html',\n styleUrls: ['./list-view-grid-demo.component.scss'],\n})\nexport class ListViewGridDemoComponent {\n public data: any[] = [\n {\n id: '1',\n name: 'Niels Bohr',\n email: 'niels.bohr@example.com',\n amount: 170.75,\n status: 'Paid',\n },\n {\n id: '2',\n name: 'Ada Lovelace',\n email: 'ada.lovelace@example.com',\n amount: 114.13,\n status: 'Paid',\n },\n {\n id: '3',\n name: 'Marie Curie',\n email: 'marie.curie@example.com',\n amount: 111,\n status: 'Past due',\n },\n {\n id: '4',\n name: 'Barbara McClintock',\n email: 'barbara.mcclintock@example.com',\n amount: 84.63,\n status: 'Paid',\n },\n {\n id: '5',\n name: 'Michael Faraday',\n email: 'michael.faraday@example.com',\n amount: 83.97,\n status: 'Paid',\n },\n {\n id: '6',\n name: 'Enrico Fermi',\n email: 'enrico.fermi@example.com',\n amount: 74.5,\n status: 'Past due',\n },\n {\n id: '7',\n name: 'Mae C. Jemison',\n email: 'mae.jemison@example.com',\n amount: 70.86,\n status: 'Paid',\n },\n {\n id: '8',\n name: 'Nikola Tesla',\n email: 'nikola.tesla@example.com',\n amount: 15.0,\n status: 'Paid',\n },\n {\n id: '9',\n name: 'Hubert J. Farnsworth',\n email: 'hubert.j.farnsworth@example.com',\n amount: 999.99,\n status: 'Past Due',\n },\n ];\n\n public onDropdownItemClicked(buttonText: string): void {\n alert(buttonText + ' button clicked!');\n }\n}\n"
|
|
2855
2855
|
},
|
|
2856
2856
|
{
|
|
2857
2857
|
"fileName": "list-view-grid-demo.module.ts",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/list-builder-view-grids",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.9.0",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
"@angular/common": "^12.2.16",
|
|
20
20
|
"@angular/core": "^12.2.16",
|
|
21
21
|
"@angular/platform-browser": "^12.2.16",
|
|
22
|
-
"@skyux-sdk/testing": "5.
|
|
23
|
-
"@skyux/grids": "5.
|
|
24
|
-
"@skyux/i18n": "5.
|
|
25
|
-
"@skyux/indicators": "5.
|
|
26
|
-
"@skyux/list-builder": "5.
|
|
27
|
-
"@skyux/list-builder-common": "5.
|
|
28
|
-
"@skyux/list-builder-view-checklist": "5.
|
|
29
|
-
"@skyux/modals": "5.
|
|
22
|
+
"@skyux-sdk/testing": "5.9.0",
|
|
23
|
+
"@skyux/grids": "5.9.0",
|
|
24
|
+
"@skyux/i18n": "5.9.0",
|
|
25
|
+
"@skyux/indicators": "5.9.0",
|
|
26
|
+
"@skyux/list-builder": "5.9.0",
|
|
27
|
+
"@skyux/list-builder-common": "5.9.0",
|
|
28
|
+
"@skyux/list-builder-view-checklist": "5.9.0",
|
|
29
|
+
"@skyux/modals": "5.9.0"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"tslib": "^2.3.1"
|