@skyux/lists 7.0.0 → 7.1.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 +47 -7
- package/package.json +10 -10
package/documentation.json
CHANGED
|
@@ -5552,17 +5552,27 @@
|
|
|
5552
5552
|
{
|
|
5553
5553
|
"fileName": "filter-demo.component.ts",
|
|
5554
5554
|
"filePath": "/projects/lists/documentation/code-examples/filter/inline/filter-demo.component.ts",
|
|
5555
|
-
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-filter-demo',\n templateUrl: './filter-demo.component.html',\n})\nexport class FilterDemoComponent {\n public appliedFilters:
|
|
5555
|
+
"rawContents": "import { Component } from '@angular/core';\n\nimport { Filter } from './filter';\nimport { Fruit } from './fruit';\n\n@Component({\n selector: 'app-filter-demo',\n templateUrl: './filter-demo.component.html',\n})\nexport class FilterDemoComponent {\n public appliedFilters: Filter[] = [];\n\n public filteredItems: Fruit[];\n\n public filtersActive = false;\n\n public fruitType = 'any';\n\n public hideOrange = false;\n\n public items: Fruit[] = [\n {\n name: 'Orange',\n type: 'citrus',\n color: 'orange',\n },\n {\n name: 'Mango',\n type: 'other',\n color: 'orange',\n },\n {\n name: 'Lime',\n type: 'citrus',\n color: 'green',\n },\n {\n name: 'Strawberry',\n type: 'berry',\n color: 'red',\n },\n {\n name: 'Blueberry',\n type: 'berry',\n color: 'blue',\n },\n ];\n\n public showInlineFilters = false;\n\n constructor() {\n this.filteredItems = this.items.slice();\n }\n\n public filterButtonClicked(): void {\n this.showInlineFilters = !this.showInlineFilters;\n }\n\n public fruitTypeChange(newValue: string): void {\n this.fruitType = newValue;\n this.setFilterActiveState();\n }\n\n public hideOrangeChange(newValue: boolean): void {\n this.hideOrange = newValue;\n this.setFilterActiveState();\n }\n\n private setFilterActiveState(): void {\n this.appliedFilters = [];\n if (this.fruitType !== 'any') {\n this.appliedFilters.push({\n name: 'fruitType',\n value: this.fruitType,\n });\n }\n if (this.hideOrange) {\n this.appliedFilters.push({\n name: 'hideOrange',\n value: true,\n });\n }\n this.filtersActive = this.appliedFilters.length > 0;\n\n this.filteredItems = this.filterItems(this.items, this.appliedFilters);\n }\n\n private orangeFilterFailed(filter: Filter, item: Fruit): boolean {\n return (\n filter.name === 'hideOrange' && !!filter.value && item.color === 'orange'\n );\n }\n\n private fruitTypeFilterFailed(filter: Filter, item: Fruit): boolean {\n return (\n filter.name === 'fruitType' &&\n filter.value !== 'any' &&\n filter.value !== item.type\n );\n }\n\n private itemIsShown(filters: Filter[], item: Fruit): boolean {\n let passesFilter = true,\n j: number;\n\n for (j = 0; j < filters.length; j++) {\n if (this.orangeFilterFailed(filters[j], item)) {\n passesFilter = false;\n } else if (this.fruitTypeFilterFailed(filters[j], item)) {\n passesFilter = false;\n }\n }\n\n return passesFilter;\n }\n\n private filterItems(items: Fruit[], filters: Filter[]): Fruit[] {\n let i: number, passesFilter: boolean;\n const result: Fruit[] = [];\n\n for (i = 0; i < items.length; i++) {\n passesFilter = this.itemIsShown(filters, items[i]);\n if (passesFilter) {\n result.push(items[i]);\n }\n }\n\n return result;\n }\n}\n"
|
|
5556
5556
|
},
|
|
5557
5557
|
{
|
|
5558
5558
|
"fileName": "filter-demo.module.ts",
|
|
5559
5559
|
"filePath": "/projects/lists/documentation/code-examples/filter/inline/filter-demo.module.ts",
|
|
5560
5560
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkyFilterModule, SkyRepeaterModule } from '@skyux/lists';\n\nimport { FilterDemoComponent } from './filter-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n SkyCheckboxModule,\n SkyIdModule,\n SkyFilterModule,\n SkyRepeaterModule,\n SkyToolbarModule,\n ],\n declarations: [FilterDemoComponent],\n exports: [FilterDemoComponent],\n})\nexport class FilterDemoModule {}\n"
|
|
5561
5561
|
},
|
|
5562
|
+
{
|
|
5563
|
+
"fileName": "filter.ts",
|
|
5564
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/inline/filter.ts",
|
|
5565
|
+
"rawContents": "export interface Filter {\n name: string;\n value: string | boolean;\n}\n"
|
|
5566
|
+
},
|
|
5567
|
+
{
|
|
5568
|
+
"fileName": "fruit.ts",
|
|
5569
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/inline/fruit.ts",
|
|
5570
|
+
"rawContents": "export interface Fruit {\n name: string;\n type: string;\n color: string;\n}\n"
|
|
5571
|
+
},
|
|
5562
5572
|
{
|
|
5563
5573
|
"fileName": "filter-demo-modal-context.ts",
|
|
5564
5574
|
"filePath": "/projects/lists/documentation/code-examples/filter/modal/filter-demo-modal-context.ts",
|
|
5565
|
-
"rawContents": "
|
|
5575
|
+
"rawContents": "import { Filter } from './filter';\n\nexport class FilterDemoModalContext {\n public appliedFilters: Filter[] = [];\n}\n"
|
|
5566
5576
|
},
|
|
5567
5577
|
{
|
|
5568
5578
|
"fileName": "filter-demo-modal.component.html",
|
|
@@ -5572,7 +5582,7 @@
|
|
|
5572
5582
|
{
|
|
5573
5583
|
"fileName": "filter-demo-modal.component.ts",
|
|
5574
5584
|
"filePath": "/projects/lists/documentation/code-examples/filter/modal/filter-demo-modal.component.ts",
|
|
5575
|
-
"rawContents": "import { Component } from '@angular/core';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport { FilterDemoModalContext } from './filter-demo-modal-context';\n\n@Component({\n selector: 'app-filter-demo-modal',\n templateUrl: './filter-demo-modal.component.html',\n})\nexport class FilterDemoModalComponent {\n public hideOrange
|
|
5585
|
+
"rawContents": "import { Component } from '@angular/core';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport { Filter } from './filter';\nimport { FilterDemoModalContext } from './filter-demo-modal-context';\n\n@Component({\n selector: 'app-filter-demo-modal',\n templateUrl: './filter-demo-modal.component.html',\n})\nexport class FilterDemoModalComponent {\n public hideOrange = false;\n\n public fruitType = 'any';\n\n constructor(\n public context: FilterDemoModalContext,\n public instance: SkyModalInstance\n ) {\n if (\n this.context &&\n this.context.appliedFilters &&\n this.context.appliedFilters.length > 0\n ) {\n this.setFormFilters(this.context.appliedFilters);\n } else {\n this.clearAllFilters();\n }\n }\n\n public applyFilters(): void {\n const result = this.getAppliedFiltersArray();\n this.instance.save(result);\n }\n\n public cancel(): void {\n this.instance.cancel();\n }\n\n public clearAllFilters(): void {\n this.hideOrange = false;\n this.fruitType = 'any';\n }\n\n private getAppliedFiltersArray(): Filter[] {\n const appliedFilters: Filter[] = [];\n if (this.fruitType !== 'any') {\n appliedFilters.push({\n name: 'fruitType',\n value: this.fruitType,\n label: this.fruitType,\n });\n }\n\n if (this.hideOrange) {\n appliedFilters.push({\n name: 'hideOrange',\n value: true,\n label: 'hide orange fruits',\n });\n }\n\n return appliedFilters;\n }\n\n private setFormFilters(appliedFilters: Filter[]): void {\n for (let i = 0; i < appliedFilters.length; i++) {\n if (appliedFilters[i].name === 'fruitType') {\n this.fruitType = `${appliedFilters[i].value}`;\n }\n\n if (appliedFilters[i].name === 'hideOrange') {\n this.hideOrange = !!appliedFilters[i].value;\n }\n }\n }\n}\n"
|
|
5576
5586
|
},
|
|
5577
5587
|
{
|
|
5578
5588
|
"fileName": "filter-demo.component.html",
|
|
@@ -5582,13 +5592,28 @@
|
|
|
5582
5592
|
{
|
|
5583
5593
|
"fileName": "filter-demo.component.ts",
|
|
5584
5594
|
"filePath": "/projects/lists/documentation/code-examples/filter/modal/filter-demo.component.ts",
|
|
5585
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { FilterDemoModalContext } from './filter-demo-modal-context';\nimport { FilterDemoModalComponent } from './filter-demo-modal.component';\n\n@Component({\n selector: 'app-filter-demo',\n templateUrl: './filter-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FilterDemoComponent {\n public appliedFilters:
|
|
5595
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { Filter } from './filter';\nimport { FilterDemoModalContext } from './filter-demo-modal-context';\nimport { FilterDemoModalComponent } from './filter-demo-modal.component';\nimport { Fruit } from './fruit';\n\n@Component({\n selector: 'app-filter-demo',\n templateUrl: './filter-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FilterDemoComponent {\n public appliedFilters: Filter[] = [];\n\n public filteredItems: Fruit[];\n\n public items: Fruit[] = [\n {\n name: 'Orange',\n type: 'citrus',\n color: 'orange',\n },\n {\n name: 'Mango',\n type: 'other',\n color: 'orange',\n },\n {\n name: 'Lime',\n type: 'citrus',\n color: 'green',\n },\n {\n name: 'Strawberry',\n type: 'berry',\n color: 'red',\n },\n {\n name: 'Blueberry',\n type: 'berry',\n color: 'blue',\n },\n ];\n\n public showInlineFilters = false;\n\n constructor(\n private modal: SkyModalService,\n private changeRef: ChangeDetectorRef\n ) {\n this.filteredItems = this.items.slice();\n }\n\n public onDismiss(index: number): void {\n this.appliedFilters.splice(index, 1);\n this.filteredItems = this.filterItems(this.items, this.appliedFilters);\n }\n\n public onInlineFilterButtonClicked(): void {\n this.showInlineFilters = !this.showInlineFilters;\n }\n\n public onModalFilterButtonClick(): void {\n const modalInstance = this.modal.open(FilterDemoModalComponent, [\n {\n provide: FilterDemoModalContext,\n useValue: {\n appliedFilters: this.appliedFilters,\n },\n },\n ]);\n\n modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n if (result.reason === 'save') {\n this.appliedFilters = result.data.slice();\n this.filteredItems = this.filterItems(this.items, this.appliedFilters);\n this.changeRef.markForCheck();\n }\n });\n }\n\n private fruitTypeFilterFailed(filter: Filter, item: Fruit): boolean {\n return (\n filter.name === 'fruitType' &&\n filter.value !== 'any' &&\n filter.value !== item.type\n );\n }\n\n private itemIsShown(filters: Filter[], item: Fruit): boolean {\n let passesFilter = true,\n j: number;\n\n for (j = 0; j < filters.length; j++) {\n if (this.orangeFilterFailed(filters[j], item)) {\n passesFilter = false;\n } else if (this.fruitTypeFilterFailed(filters[j], item)) {\n passesFilter = false;\n }\n }\n\n return passesFilter;\n }\n\n private filterItems(items: Fruit[], filters: Filter[]): Fruit[] {\n let i: number, passesFilter: boolean;\n const result: Fruit[] = [];\n\n for (i = 0; i < items.length; i++) {\n passesFilter = this.itemIsShown(filters, items[i]);\n if (passesFilter) {\n result.push(items[i]);\n }\n }\n\n return result;\n }\n\n private orangeFilterFailed(filter: Filter, item: Fruit): boolean {\n return (\n filter.name === 'hideOrange' && !!filter.value && item.color === 'orange'\n );\n }\n}\n"
|
|
5586
5596
|
},
|
|
5587
5597
|
{
|
|
5588
5598
|
"fileName": "filter-demo.module.ts",
|
|
5589
5599
|
"filePath": "/projects/lists/documentation/code-examples/filter/modal/filter-demo.module.ts",
|
|
5590
5600
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkyFilterModule, SkyRepeaterModule } from '@skyux/lists';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { FilterDemoModalComponent } from './filter-demo-modal.component';\nimport { FilterDemoComponent } from './filter-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n SkyIdModule,\n SkyCheckboxModule,\n SkyFilterModule,\n SkyModalModule,\n SkyRepeaterModule,\n SkyToolbarModule,\n ],\n declarations: [FilterDemoComponent, FilterDemoModalComponent],\n exports: [FilterDemoComponent],\n})\nexport class FilterDemoModule {}\n"
|
|
5591
5601
|
},
|
|
5602
|
+
{
|
|
5603
|
+
"fileName": "filter.ts",
|
|
5604
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/modal/filter.ts",
|
|
5605
|
+
"rawContents": "export interface Filter {\n name: string;\n value: string | boolean;\n label: string;\n}\n"
|
|
5606
|
+
},
|
|
5607
|
+
{
|
|
5608
|
+
"fileName": "fruit.ts",
|
|
5609
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/modal/fruit.ts",
|
|
5610
|
+
"rawContents": "export interface Fruit {\n name: string;\n type: string;\n color: string;\n}\n"
|
|
5611
|
+
},
|
|
5612
|
+
{
|
|
5613
|
+
"fileName": "infinite-scroll-demo-item.ts",
|
|
5614
|
+
"filePath": "/projects/lists/documentation/code-examples/infinite-scroll/repeater/infinite-scroll-demo-item.ts",
|
|
5615
|
+
"rawContents": "export interface InfiniteScrollDemoItem {\n name: string;\n}\n"
|
|
5616
|
+
},
|
|
5592
5617
|
{
|
|
5593
5618
|
"fileName": "infinite-scroll-demo.component.html",
|
|
5594
5619
|
"filePath": "/projects/lists/documentation/code-examples/infinite-scroll/repeater/infinite-scroll-demo.component.html",
|
|
@@ -5597,7 +5622,7 @@
|
|
|
5597
5622
|
{
|
|
5598
5623
|
"fileName": "infinite-scroll-demo.component.ts",
|
|
5599
5624
|
"filePath": "/projects/lists/documentation/code-examples/infinite-scroll/repeater/infinite-scroll-demo.component.ts",
|
|
5600
|
-
"rawContents": "import { Component, OnInit } from '@angular/core';\n\nlet nextId = 0;\n\n@Component({\n selector: 'app-infinite-scroll-demo',\n templateUrl: './infinite-scroll-demo.component.html',\n})\nexport class InfiniteScrollDemoComponent implements OnInit {\n public items:
|
|
5625
|
+
"rawContents": "import { Component, OnInit } from '@angular/core';\n\nimport { InfiniteScrollDemoItem } from './infinite-scroll-demo-item';\n\nlet nextId = 0;\n\n@Component({\n selector: 'app-infinite-scroll-demo',\n templateUrl: './infinite-scroll-demo.component.html',\n})\nexport class InfiniteScrollDemoComponent implements OnInit {\n public items: InfiniteScrollDemoItem[] = [];\n\n public itemsHaveMore = true;\n\n public ngOnInit(): void {\n this.addData();\n }\n\n public onScrollEnd(): void {\n if (this.itemsHaveMore) {\n this.addData();\n }\n }\n\n private addData(): void {\n this.mockRemote().then(\n (result: { data: InfiniteScrollDemoItem[]; hasMore: boolean }) => {\n this.items = this.items.concat(result.data);\n this.itemsHaveMore = result.hasMore;\n }\n );\n }\n\n private mockRemote(): Promise<{\n data: InfiniteScrollDemoItem[];\n hasMore: boolean;\n }> {\n const data: InfiniteScrollDemoItem[] = [];\n\n for (let i = 0; i < 8; i++) {\n data.push({\n name: `Item #${++nextId}`,\n });\n }\n\n // Simulate async request.\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data,\n hasMore: nextId < 50,\n });\n }, 1000);\n });\n }\n}\n"
|
|
5601
5626
|
},
|
|
5602
5627
|
{
|
|
5603
5628
|
"fileName": "infinite-scroll-demo.module.ts",
|
|
@@ -5619,6 +5644,11 @@
|
|
|
5619
5644
|
"filePath": "/projects/lists/documentation/code-examples/paging/basic/paging-demo.module.ts",
|
|
5620
5645
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyPagingModule } from '@skyux/lists';\n\nimport { PagingDemoComponent } from './paging-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyPagingModule],\n declarations: [PagingDemoComponent],\n exports: [PagingDemoComponent],\n})\nexport class PagingDemoModule {}\n"
|
|
5621
5646
|
},
|
|
5647
|
+
{
|
|
5648
|
+
"fileName": "repeater-demo-item.ts",
|
|
5649
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/add-remove/repeater-demo-item.ts",
|
|
5650
|
+
"rawContents": "export interface RepeaterDemoItem {\n title: string;\n note: string;\n status: string;\n}\n"
|
|
5651
|
+
},
|
|
5622
5652
|
{
|
|
5623
5653
|
"fileName": "repeater-demo.component.html",
|
|
5624
5654
|
"filePath": "/projects/lists/documentation/code-examples/repeater/add-remove/repeater-demo.component.html",
|
|
@@ -5632,7 +5662,7 @@
|
|
|
5632
5662
|
{
|
|
5633
5663
|
"fileName": "repeater-demo.component.ts",
|
|
5634
5664
|
"filePath": "/projects/lists/documentation/code-examples/repeater/add-remove/repeater-demo.component.ts",
|
|
5635
|
-
"rawContents": "import { Component } from '@angular/core';\n\nlet nextId = 0;\n\n@Component({\n selector: 'app-repeater-demo',\n templateUrl: './repeater-demo.component.html',\n styleUrls: ['./repeater-demo.component.scss'],\n})\nexport class RepeaterDemoComponent {\n public items:
|
|
5665
|
+
"rawContents": "import { Component } from '@angular/core';\n\nimport { RepeaterDemoItem } from './repeater-demo-item';\n\nlet nextId = 0;\n\n@Component({\n selector: 'app-repeater-demo',\n templateUrl: './repeater-demo.component.html',\n styleUrls: ['./repeater-demo.component.scss'],\n})\nexport class RepeaterDemoComponent {\n public items: RepeaterDemoItem[] = [\n {\n title: 'Call Robert Hernandez',\n note: 'Robert recently gave a very generous gift. We should call him to thank him.',\n status: 'Completed',\n },\n {\n title: 'Send invitation to Spring Ball',\n note: \"The Spring Ball is coming up soon. Let's get those invitations out!\",\n status: 'Past due',\n },\n ];\n\n public addItem(): void {\n this.items.push({\n title: 'New reminder ' + ++nextId,\n note: 'This is a new reminder',\n status: 'Active',\n });\n }\n\n public changeItems(tags: RepeaterDemoItem[]): void {\n this.items = tags;\n }\n\n public onActionClicked(buttonText: string): void {\n alert(buttonText + ' was clicked!');\n }\n\n public removeItem(): void {\n this.items.pop();\n }\n}\n"
|
|
5636
5666
|
},
|
|
5637
5667
|
{
|
|
5638
5668
|
"fileName": "repeater-demo.module.ts",
|
|
@@ -5659,6 +5689,11 @@
|
|
|
5659
5689
|
"filePath": "/projects/lists/documentation/code-examples/repeater/basic/repeater-demo.module.ts",
|
|
5660
5690
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { RepeaterDemoComponent } from './repeater-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyDropdownModule, SkyRepeaterModule],\n declarations: [RepeaterDemoComponent],\n exports: [RepeaterDemoComponent],\n})\nexport class RepeaterDemoModule {}\n"
|
|
5661
5691
|
},
|
|
5692
|
+
{
|
|
5693
|
+
"fileName": "repeater-demo-item.ts",
|
|
5694
|
+
"filePath": "/projects/lists/documentation/code-examples/sort/basic/repeater-demo-item.ts",
|
|
5695
|
+
"rawContents": "export interface RepeaterDemoItem {\n title: string;\n note: string;\n assignee: string;\n date: Date;\n}\n"
|
|
5696
|
+
},
|
|
5662
5697
|
{
|
|
5663
5698
|
"fileName": "sort-demo.component.html",
|
|
5664
5699
|
"filePath": "/projects/lists/documentation/code-examples/sort/basic/sort-demo.component.html",
|
|
@@ -5667,12 +5702,17 @@
|
|
|
5667
5702
|
{
|
|
5668
5703
|
"fileName": "sort-demo.component.ts",
|
|
5669
5704
|
"filePath": "/projects/lists/documentation/code-examples/sort/basic/sort-demo.component.ts",
|
|
5670
|
-
"rawContents": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-sort-demo',\n templateUrl: './sort-demo.component.html',\n})\nexport class SortDemoComponent implements OnInit {\n public initialState
|
|
5705
|
+
"rawContents": "import { Component, OnInit } from '@angular/core';\n\nimport { RepeaterDemoItem } from './repeater-demo-item';\nimport { SortOption } from './sort-option';\n\n@Component({\n selector: 'app-sort-demo',\n templateUrl: './sort-demo.component.html',\n})\nexport class SortDemoComponent implements OnInit {\n public initialState = 3;\n\n public sortedItems: RepeaterDemoItem[] = [\n {\n title: 'Call Robert Hernandez',\n note: 'Robert recently gave a very generous gift. We should call to thank him.',\n assignee: 'Debby Fowler',\n date: new Date('12/22/2015'),\n },\n {\n title: 'Send invitation to ball',\n note: \"The Spring Ball is coming up soon. Let's get those invitations out!\",\n assignee: 'Debby Fowler',\n date: new Date('1/1/2016'),\n },\n {\n title: 'Clean up desk',\n note: 'File and organize papers.',\n assignee: 'Tim Howard',\n date: new Date('2/2/2016'),\n },\n {\n title: 'Investigate leads',\n note: 'Check out leads for important charity event funding.',\n assignee: 'Larry Williams',\n date: new Date('4/5/2016'),\n },\n {\n title: 'Send thank you note',\n note: 'Send a thank you note to Timothy for his donation.',\n assignee: 'Catherine Hooper',\n date: new Date('11/11/2015'),\n },\n ];\n\n public sortOptions: SortOption[] = [\n {\n id: 1,\n label: 'Assigned to (A - Z)',\n name: 'assignee',\n descending: false,\n },\n {\n id: 2,\n label: 'Assigned to (Z - A)',\n name: 'assignee',\n descending: true,\n },\n {\n id: 3,\n label: 'Date created (newest first)',\n name: 'date',\n descending: true,\n },\n {\n id: 4,\n label: 'Date created (oldest first)',\n name: 'date',\n descending: false,\n },\n {\n id: 5,\n label: 'Note title (A - Z)',\n name: 'title',\n descending: false,\n },\n {\n id: 6,\n label: 'Note title (Z - A)',\n name: 'title',\n descending: true,\n },\n ];\n\n public ngOnInit(): void {\n this.sortItems(this.sortOptions[2]);\n }\n\n public sortItems(option: SortOption): void {\n this.sortedItems = this.sortedItems.sort(function (\n a: RepeaterDemoItem,\n b: RepeaterDemoItem\n ) {\n const descending = option.descending ? -1 : 1;\n const sortProperty: keyof typeof a = option.name;\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"
|
|
5671
5706
|
},
|
|
5672
5707
|
{
|
|
5673
5708
|
"fileName": "sort-demo.module.ts",
|
|
5674
5709
|
"filePath": "/projects/lists/documentation/code-examples/sort/basic/sort-demo.module.ts",
|
|
5675
5710
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkyRepeaterModule, SkySortModule } from '@skyux/lists';\n\nimport { SortDemoComponent } from './sort-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyRepeaterModule, SkySortModule, SkyToolbarModule],\n declarations: [SortDemoComponent],\n exports: [SortDemoComponent],\n})\nexport class SortDemoModule {}\n"
|
|
5711
|
+
},
|
|
5712
|
+
{
|
|
5713
|
+
"fileName": "sort-option.ts",
|
|
5714
|
+
"filePath": "/projects/lists/documentation/code-examples/sort/basic/sort-option.ts",
|
|
5715
|
+
"rawContents": "import { RepeaterDemoItem } from './repeater-demo-item';\n\nexport interface SortOption {\n id: number;\n label: string;\n name: keyof RepeaterDemoItem;\n descending: boolean;\n}\n"
|
|
5676
5716
|
}
|
|
5677
5717
|
]
|
|
5678
5718
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/lists",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.1.0",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -44,15 +44,15 @@
|
|
|
44
44
|
"@angular/common": "^14.2.11",
|
|
45
45
|
"@angular/core": "^14.2.11",
|
|
46
46
|
"@angular/platform-browser": "^14.2.11",
|
|
47
|
-
"@skyux-sdk/testing": "7.
|
|
48
|
-
"@skyux/animations": "7.
|
|
49
|
-
"@skyux/core": "7.
|
|
50
|
-
"@skyux/forms": "7.
|
|
51
|
-
"@skyux/i18n": "7.
|
|
52
|
-
"@skyux/indicators": "7.
|
|
53
|
-
"@skyux/inline-form": "7.
|
|
54
|
-
"@skyux/popovers": "7.
|
|
55
|
-
"@skyux/theme": "7.
|
|
47
|
+
"@skyux-sdk/testing": "7.1.0",
|
|
48
|
+
"@skyux/animations": "7.1.0",
|
|
49
|
+
"@skyux/core": "7.1.0",
|
|
50
|
+
"@skyux/forms": "7.1.0",
|
|
51
|
+
"@skyux/i18n": "7.1.0",
|
|
52
|
+
"@skyux/indicators": "7.1.0",
|
|
53
|
+
"@skyux/inline-form": "7.1.0",
|
|
54
|
+
"@skyux/popovers": "7.1.0",
|
|
55
|
+
"@skyux/theme": "7.1.0"
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
58
|
"dragula": "3.7.3",
|